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
Related
I am having an issue with the Nivo responsive bar chart. I have set the "minValue" and the "maxValue" in my chart props per the documentation. The data passed to the chart contains valid in range values of the "minValue" and "maxValue."
When manually specifying "minValue" and "maxValue" the bars overflow on the x-axis and do not display properly.
A little context... I don't want to set the "minValue" and "maxValue" as "auto" because I need to show the floor and ceiling of the possible numbers. Setting it "auto" will cause the chart to automatically calculate the min and the max values based on the lowest and highest number in the dataset. The bars display correctly on the x-axis and don't overflow when using the "auto" setting.
Does anyone know why the bars don't display properly when specifying custom "minValue" and "maxValue"? Any ideas on what might be wrong?
Demo Here
You have to set the clamp value to true in your valueScale property, ie:
<ResponsiveBar
...
valueScale={{
type: 'linear',
min: minVal * 0.8,
max: maxVal * 1.2,
clamp: true
}}
...
/>
In below picture,
The date displayed at end of axis line (x-axis) is diff from date displayed at end of data zoom.
Required,
The date should be same, at axis line & data zoom, When no zoom is applied.
The date should be the last value in data that is passed to charts by settings.
Screenshot is taken from official site of echarts.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
Actually, the chart does show data up to 2009/10/18, but since the xAxis ticks aren't equally spaced, there's a small area at the chart's end
Look what happens when I hover over the chart's right end. It does show you 2009/10/18.
Because the axis ticks are alligned from the left, and the chart's axis is dynamic (because of the custom zoom range), it may not always fit perfectly.
You can, however, play a little with the ticks and labels.
For example, when you have 100 datapoints, you can change the tick interval and label from auto to, let's say, 10 (or another whole number divisible by the number of datapoints).
xAxis: [
{
axisTick: {
interval: 10
},
axisLabel: {
interval: 10
},
}
]
So I'm trying to get my highcharts plot to draw the recent minima and maxima.
I already figured the correct JSON sub-object is "plotLines", however my script just refuses to draw them without any error. Maybe someone of you can spot my error. The corresponding (and probably wrong, but that doesn't really matter for this example) values are listed to the left
thanks!
With you current values, the lines will never plot.
Your axis min is sitting at 500, and you are plotting lines at 498.
The axis will not expand to show plotLines or plotBands - it will only expand to show data (or based on minPadding/maxPAdding, etc).
You will need to check that your lines are within your axis min/max in order to display them.
You can do that by using the getExtremes() method, and if needed, the setExtremes() method:
http://api.highcharts.com/highcharts#Axis.getExtremes
http://api.highcharts.com/highcharts#Axis.setExtremes
Edit to incorporate comments:
If the line is the same value as a grid line, you will need to set a zIndex on either the plotLine or the gridLines - by default the gridLines are above the plotLines
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.
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.