I need my yAxis categories to be 0 = 'Poor', 0.25 = 'Below Average', 0.75 = 'Average' 1="Good"
I set the categories right, but Highcharts seems to interpret each point I plot to be equal to "1" step on the yAxis. See http://jsfiddle.net/54cFG/
Ideally, that chart should always show 4 labels on the yAxis and the plotted points should line up at "Below Average" and "Average".
Is there a setting I'm missing? I think I pretty much tried everything at http://www.highcharts.com/ref/
You could always use plot bands to display categories on the Y axis. That way you could still keep the actual values. I have demonstrated that with your code here.
EDIT
Here is another example with the grid lines taken off and the plotBands each with their own color. Here is the color chart if you wan to change any of them.
If you prefer to use the plot bands and no y-axis labels, here is an example of that. I think it works just fine. If the user really wants to see the exact value they can hover over the point.
Related
I am using Highcharts Stock with an additional xrange series added ad-hoc. The purpose of the xrange is to mark out a particular price in the candlestick chart. The reason for using xrange instead of plotLines, etc is so that I can allow the user to drag/drop the price line, and my understanding is that can only be done using series.
I have been able to successfully add the xrange. However, my issue is that after the xrange is added, it changes the display of the chart by changing the min/max values on the y-axis.
I have included...
yAxis: {
startOnTick: false,
endOnTick: false,
},
... on the chart in order for the y-axis range to be auto-zoomed around the min and max ohlc values in focus. But once the xrange is included, I guess it treats "0" as the min y value in the chart, and this is a problem when visualizing currencies whose price ranges are much greater than 0. When this is the case, the inclusion of the xrange significantly stretches the y-axis, and compresses the candlesticks that I want to remain visible.
I would like to keep the chart's zoom adjusted to the min/max visible ohlc values even after the xrange is added.
I have been reviewing the options for xrange series, as well for as the chart yAxis in the api docs. None of them seem to target this behavior, and I have been messing around with some of their configurations anyways, with no luck.
I know that I can define explicit min/max like this:
yAxis: {
min: 18000,
max: 23000,
tickInterval: 1000
},
But I would like to avoid that, since as mentioned above, I would like it to be dynamic to the visible min/max ohlc values.
jsfiddle showing the issue (click the button to add the xrange): https://jsfiddle.net/gheim/hLo3fr1w/6/
p.s. If anyone has suggestions for a different method of adding a movable price line that may be more manageable than an xrange, I am open to suggestions and would appreciate the input.
Use the method setExtremes builded in the Highcharts axis class to set minimum and maximum of the render the axes.
chart.yAxis[0].setExtremes(21000, 22000);
Demo: https://jsfiddle.net/BlackLabel/km9y3hj0/
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have this area chart, and this has just one data set. My question is, how can I show that data on the middle where is the label and not besides the Y axis. I used the tickPlacement: 'between' on the xaxis option but doesn't work. Any thoughts?
Thanks!
I basically want to just combine these two charts:
1) Column range: https://www.highcharts.com/demo/columnrange
2) Basic line: https://www.highcharts.com/demo/line-basic
Is this possible, considering that the first chart has a categorical Y-Axis?
I don't need to use categories, I only want the Y-Axis of the line chart. And the lines would be overlaid on top of the horizontal bars.
So both charts would be using the X-Axis time series, but only the line chart would be using the Y-Axis numbers.
You can link both charts into one but you need to remember, that the columnrange chart is inverted and if you want to display line chart exactly like in this example (https://www.highcharts.com/demo/line-basic), you need to swap x values with y values of line series and both axis should have the same scale.
API Reference:
http://api.highcharts.com/highcharts/chart.inverted
Examples:
http://jsfiddle.net/jmmsyv9w/ - not inverted
http://jsfiddle.net/8unrzm1j/ - inverted
I have looked for a particular case for a highchart configuration but cant seem to find any answers.
I want to know is it possible to add some padding on the x axis to put the plotted graph in an arbitrary point on the x axis such that is should look like so:
Desired Graph
I've tried
minPadding: 1,
maxPadding: 1
which can condense data towards the middle but I want an empty plot point
Here is a jsFiddle to get most of what I wanted except that padding
jsFiddle
This update will add two empty categories
Javascript line 8
data: [0,12.5,32.7,45,9.8,0],
Javascript lie 13
categories: ['','<16', '16-25', '26-35', '>35',''],
I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.