Highcharts - getting all values scrollable after setting min-max range - javascript

Consider my following example case.
dataset = [[1,5],[2,6],[3,7],4,8],[5,9],[6,10]].
I made this graph scrollable on x-axis. When the graph is first loaded, I can see y values from x=1 to 4 by scrolling. The next step is I want to set min and max x-ranges by setExtreme() method.
I want to set x-axis min value 2 and max value 5. The graph range for x-axis should be 2-3. But the graph should be able to scroll to see value of x=1 and also when x=10. Is this possible? I am new to highcharts. Thanks in advance.

I think that you can achieve your requirement by defining the xAxis.min and xAxis.max values.
Demo: https://jsfiddle.net/BlackLabel/2wjztbom/
xAxis: {
min: 2,
max: 4,
scrollbar: {
enabled: true
},
},
Be aware that scrollbar feature is available only for the Highcharts Stock module, not for basic Highcharts - https://www.highcharts.com/docs/chart-concepts/scrollbar

Related

How do I stop chart js from auto rescaling the y axis upon calling chart.update()?

I have created a graph which is scaled according the value selected on the first slider.
As you can see in the second picture, the first slider is set to 50 and the values are all halved. My problem is that chart js auto rescales the y axis whenever chart.update() is called (which is called whenever I drag the slider).
How do I disable this?
When creating the chart, you could define min and max options for yAxes.ticks. This may be hard-coded value or you may derive them from the chart data.
yAxes: [{
ticks: {
max: 350,
min: 0
}
}]

PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

I am developing a barchart in React Js using React HighCharts Library. So in some of the case my data interval is not linear(diffrence between min value and max is very large). so the plotlines are overlapping. Sharing the image for reference.
Please help me to solve this i want my label to show clearly.
In this Image i have 2 plot lines valued at 0.66 and some nearby value 0.5 or so.
They are overlapping. Please help to solve this case.
Thanks.
Highcharts doesn't provide any mechanism for handling overlapping plot lines - it has to be done manually.
Plot line labels can be adjusted by using y property:
plotLines: [{
value: 22,
color: 'red',
width: 1,
label: {
text: 'First label',
y: 13
}
}
Live demo: http://jsfiddle.net/BlackLabel/zm5fk3rw/
If you're looking for more dynamic approach place the code responsible for changing the position of labels in chart.events.load callback.
Current y position of label is kept in yAxis.plotLinesAndBands[i].label.alignAttr.y property. yAxis.plotLinesAndBands[i].label is SVGElement so its y position can be changed like this: yAxis.plotLinesAndBands[i].label.attr({y: newValue}).
Starting point for implementing dynamic logic for positioning plot line labels: http://jsfiddle.net/BlackLabel/1vh940kj/
API references:
https://api.highcharts.com/highcharts/yAxis.plotLines.label.y
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Plot line value property works the same as y in points - it reflects the real value and it's normal that plot lines overlap when they have almost the same value.
If you want to change its y position anyway you can use the same approach that I proposed for dynamic positioning of the labels (current y position of the label can be extracted from yAxis.plotLinesAndBands[0].svgElem.d property):
Starting point for implementing dynamic logic for positioning plot lines: http://jsfiddle.net/BlackLabel/t2hxrwp5/

Setting Min and Max values for more than two Highchart Solid Gauges using function

I am facing difficulty in setting Min and Max Values for my Solid Gauges in highcharts.
Please Refer my jsfiddle: https://jsfiddle.net/abhaybh/n45snkm6/
I am using yAxis for setting the range as described here:
yAxis:
{
min: minData,
max: maxData,
},
I want to set different ranges for different Gauges. But, they are not displaying the same range as inserted.
Any help will be appreciated. Thanks.
A problem here is actually in tickAmount attribute of yAxis, which is set to 2. That makes solidgauge to round up max value in order to satisfy this number (http://api.highcharts.com/highcharts/yAxis.max). It seems to be the easiest way to display appropriate values for each solidgauge is to use the tickPositions array inside yAxis object: tickPositions: [minData, maxData]. It will override behaviour of tickInterval and tickPixelInterval, and a gauge will display needable values as min and max labels. Here is your modified fiddle: https://jsfiddle.net/n45snkm6/1/.

How can I set a min/max width to highchart's columns?

I'm using 'Highcharts' column chart (not stacked).
My graph presents a dynamic data, so I don't know how many columns I'm expecting. That's why I would like to set a minimum and maximum width to the columns - when there are a lot of columns, I want as many columns as possible to be shown on my chart without needing a scroll (so the column's width is equal the min width); when there are only a few columns, I would like the columns to be in a reasonable width and not to spread all over the chart (the max width).
I know I can set the 'pointWidth' property, but it's not quite what I'm looking for.
If you have any idea, I will be more than thankful.
TIA,
adi
The best option is to not set the pointWidth and just let highcharts work it out for you. Use the pointPadding option to specify the gap between columns, and highcharts will do the rest.
e.g. this fiddle shows the same chart rendering different numbers of points: http://jsfiddle.net/122k2x5s/
plotOptions: {
series: {
pointPadding: 0.1,
groupPadding: 0,

Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis

When using Highcharts (v.3.0.5), I have multiple Y Axis displayed in the same chart. Using the legend, a user can choose to hide or show any of the Y Axis as they want. All this is built in feature of the Highcharts javascript library. However, when a Y Axis is hidden, its Title still appears visible in the Chart. I would like to hide it when the rest of the Y Axis is hidden. Surprised this is not the default behaviour already. Does anyone know how to do that?
The behaviour can be seen by looking at the example provided on Highcharts examples page:
http://www.highcharts.com/demo/combo-multi-axes
If you hide the "rainfall" axis for example, the title remains in the chart as "Rainfall".
I found this post (several years old) where the exact same question was asked. However, the solution proposed does not work. The show and hide events, redisplay everything.
http://forum.highcharts.com/highcharts-usage/how-to-hide-y-axis-title-multiple-axis-t6973/#p32842
This actually turns out to be a much sought after question/answer. Since Highcharts V2.2, it is possible to assign "showEmpty: false" to y axis definitions and this will ensure that when hidden, the Y-axis text label is also hidden. Example snippet of config below:
yAxis: [{
min: 0,
showEmpty: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#3366CC'
}
},
title: {
text: 'Clicks',
style: {
color: '#3366CC'
}
},
id: 'Clicks'
},
...
I have read reports where this showEnabled = false breaks if both min and max are also set. In the case above, where only min is set, it worked well for me using Highcharts V3.0.5
you can use yAxis.setTitle() and set/remove the title when needed.
here is the api documentation link
#arcseldon, it is true that showEnabled = false breaks if both min and max are also set. A possible workaround in this case is to set floor and max instead

Categories

Resources