I am using HighCharts version 4.0.4. I have a scatter chart which has percentage values for width and height. So the graph resizes automatically if the size of the container / the window has changed.
The only thing which does not change in size is the radius of the markers, because it seems that I only can define a Number, see here plotOptions.scatter.marker.radius.
Here is a JSFiddle here with a fix radiusof 10.
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
plotOptions: {
scatter: {
marker: {
radius: 10
}
}
}
/*, ... */
});
});
Resizing the container / window, the marker size is always the same. But my web page uses percentage or rem values and I also want to resize all markers of the graph. How can this be done?
Since the radius only takes a number, you can hook a handler to the window.resize (for example) and use it to grow or shrink the marker radius based on whether the width has increased or decreased (you can change the marker radius programmatically by passing an object with the new radius to the update method on each series).
I don't know if that is the path you want to take or not, but I've updated your Fiddle with a simple example showing just that.
In it I increment the marker radius by 1 if the handler detects that the width as increased and decrement it by 1 if it detects a decrease (you will have to figure out a better growth/decrease algorithm.
Related
I've got a line-chart with potentially more than 10 points. It will be drawn inside a container element with fixed width (let's say 800px).
In case the points count gets more than 10, I need to make the chart scrollable in a way which initially displays only the last 10 points.
Here's the fiddle for what I have right now:
https://jsfiddle.net/kpx13oz9/69/
Currently, I have the scroll-bar initially sitting on the rightmost position (which is what I want). But, as I increase the number of totalItemCount, more points are included inside the scrollable plot and some of the ticks on the x-axis become hidden.
I'm looking for a configuration which enforces the following:
regardless of the number of points, display the latest 10 points. the rest of the points will be accessible by horizontal scrollbar.
All the ticks on the x-axis need to be displayed always. No auto-hide.
You can dynamically calculate the minWidth property based on the created chart. To show all of the labels, set xAxis.tickInterval to one day.
chart: {
events: {
load: function() {
const minWidth = this.plotSizeX / 9 * workOrderHistory.length;
this.update({
chart: {
scrollablePlotArea: {
scrollPositionX: 1,
minWidth
}
}
}, false);
this.xAxis[0].update({
width: '100%'
});
},
render: drawCrosshair(crosshair, 'red')
}
}
Live demo: https://jsfiddle.net/BlackLabel/v3zowk9e/
API Reference: https://api.highcharts.com/highcharts/xAxis
Zooming with a zoomType of 'x' in a Highcharts chart, seems to only crop the data area between given coordinate stops. Is there a way to zoom in and still have all data available through scrolling?
{
chart: {
borderWidth: 0,
zoomType: "x",
scrollablePlotArea: {
scrollPositionX: 1,
minWidth: 1057
}
}
}
https://jsfiddle.net/OysteinAmundsen/4x7yzu68/3/
The fiddle above is set to a minimum width of 1057px, while the max-width of the container is 800px. This forces a horizontal scrollbar. If you zoom in on the data, notice that the available scrolling area does not change. This means that the data is not zoomed, it is cropped and stretched to fill the area.
I know there are events I can hook on to - the redraw event seems a likely candidate. Perhaps I can adjust the minWidth and cancel the crop-zoom, or is there a config I'm missing wihch whould do what I want?
The simplest solution is to use scrollbar feature from Highstock:
scrollbar: {
enabled: true
}
Live demo: https://jsfiddle.net/BlackLabel/be5wvg9q/
API Reference: https://api.highcharts.com/highstock/scrollbar
I have made a highcharts graph which is intended to mirror the following:
I am using a triangle image as a marker for the graph, but by default, the marker is being situated in the center of the bar. I have tried to use the translation function
chart.series[1].data.graphic.translate(0, 20);
but this does not seem to be helping.
Here is my full code:
barchartFiddle
I was also wondering how I would add the percentage to the top of as it would move along with the bar.
Furthermore, I have tried using (multiple versions with different css properties + high zIndex - I will be listing the basic)
chart.renderer.text('blah',50,50).add();
to add the bottom 3 criteria, but for some odd reason, no text shows up.
Finally, I was wondering what logic to add in order to change the appearance of the text, depending on the data, to mirror the one shown in the image (Note difference between acceptable and healthy)
In your jsFiddle you have added your callback function in wrong place, when you will add it correctly it should work fine.
function(chart) {
var marker = chart.series[1].data[0];
marker.graphic.translate(-20, 0);
}
You can use dataLabels for showing the percent value near your marker.
dataLabels: {
enabled: true,
x: -5,
y: 10,
style: {
fontSize: 20
},
formatter: function() {
return this.y + '%'
}
}
Here you can find an example how it can work: http://jsfiddle.net/2TuCW/341/
I would like my chart area to be extended on the top so I've added a negative margin to the chart. However, this causes series at times to be drawn over the contextButtons and can make them impossible to click. I'd like to just increase the z-index or do something that makes them appear above the series without having to make my own buttons that live outside the chart. Does anyone have a way to do this?
Example: http://jsfiddle.net/tu67e1ce/1/
chart: {
marginTop: -25,
events: {
load: function() {
this.exportSVGElements[0].toFront();
this.exportSVGElements[1].toFront();
}
}
},
So method toFront() will bring items on top of the SVG container. this.exportSVGElements[0]/[1] are button/symbol. Of course both of them are inner object of the Highcharts core.
when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.