Whenever I set the categories for X, Y data in highcharts it shifts the categories so that the first one appears on the zero. For example, if I have x and y data that go from one to ten as in [[1,1],[2,2],... then the categories only show up on the 1 through 9 numbers and are shifted by one as if the first item appears on the zero category.
Is there any way to address this?
Here is the fiddle
I am using the command :
chart.xAxis[0].setCategories(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']);
The problem is that you are assuming Highcharts will start from 1, while they start from 0. If you will remove all x-values from data, you will see that are starting from 0. Unfortunately this is part of Highcharts logic (based on Javascript arrays) and won't be changed.
And just in case - don't try to use logarithmic axis with categories.. ;)
Related
After updating Highcharts to newer versions (e.g. 9.0.0+/10.3.2), min value for yAxis for area chart is always set to 0 and for large values the chart looks like stright line without extremes. For line chart type, chart looks ok.
Please see example - https://stackblitz.com/edit/angular14-standaone-components-highcharts-vwctmh?file=src%2Fapp%2Fapp.component.ts
On version 7.2.2 for area chart, min value was automatically calculated based on input data.
Is it a bug?
How can I set options to force min value to be automatically calculated?
You need to set threshold property to null.
From Highcharts API:
threshold: number, null
The Y axis value to serve as the base for the area, for distinguishing
between values above and below a threshold. The area between the graph
and the threshold is filled.
If a number is given, the Y axis will scale to the threshold.
If null, the scaling behaves like a line series with fill between the graph and the Y axis minimum.
If Infinity or -Infinity, the area between the graph and the corresponding Y axis extreme is filled (since v6.1.0).
Defaults to 0.
series: [{
...,
threshold: null
}]
Discussion about softThreshold: https://github.com/highcharts/highcharts/issues/15061
Live demo: http://jsfiddle.net/BlackLabel/9cnmxqks/
API Reference: https://api.highcharts.com/highcharts/series.area.threshold
Area chart with softThreshold on Highcharts 7.2.1 has the yAxis starting point as auto-calculation value (the same as Line chart) but from 8.2.2 and higher yAxis Area chart always starts from 0
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
softThreshold: true,
data: [9990, 9150, 10640, 12920, 14400, 17600, 13560, 14850, 21640,19410, 9960, 9440]
}]
});
7.2.1 example: https://jsfiddle.net/6v7gd8m0/5/
8.2.2 example: https://jsfiddle.net/b0tz3dfq/
Does anyone know how to make yAxis of an Area chart start with auto-calculation value and not always with 0?
======================
EDIT ======================
From 8.2.2 and higher softThreshold seems to work opposite so with softThreshold set to false
Example: https://jsfiddle.net/0keanhs2/
Does anyone understands why in that case softThreshold seem to have opposite result when switching from version 7 to 8?
I am using this example to draw highchart of column type.
https://www.highcharts.com/demo/column-basic
The example shows different color combination for month Jan, Feb etc. I am wondering, is it possible to have same color for each month? That is, for each bar in Jan month have same color set say, red, then Feb, will have color green for each bars and all bars from March will have orange etc.
I tried to find out the way, but unable to do so.
Any help is appreciated.
Thanks.
colorByPoint: true
did the trick. This worked for me. You can use this in your series option.
Eg.
series: [{
name: 'Jan',
data: [10,20,50,60],
colorByPoint: true,
color: red
}, {
name: 'Feb',
data: [20,50,30,80],
colorByPoint: true,
color: green
},{
....
This might be useful for someone.
How can I draw a high chart with two labels in x coordinate one is string another one is a date in highcharts
You can use the xAxis.categories feature to achieve it.
Demo: https://jsfiddle.net/BlackLabel/xj0dh8es/
xAxis: {
categories: ['test1', '04/07','05/07','06/07']
},
API: https://api.highcharts.com/highcharts/xAxis.categories
I have a series of points that has fast changing values, which makes it very spiky and uneasy to read when zooming out.
I would like to know if there is a way to draw above the already existing series, another one that would represent the average of, for exemple: every 10 points, or every point in a minute?
I've looked into dataGrouping but can't seem to make it work, is that what I'm looking for ?
Thanks for reading.
There is no current built-in method to do this. You would need to create a second series that is the running average and add it to the chart.
The main issue here is that HS has dataGrouping enabled by default for all series. So, when you add your second series that has dataGrouping enabled with params you want - it is also applied to the initial series. You only see one series on the chart because the 2 series are identical and overlap each other.
To fix this set dataGrouping off in the "real" series. Then have dataGrouping on in the averaged series. See this example.
...
series: [{
name: 'MSFT',
data: MSFT,
dataGrouping: {
enabled: false
}
}]
...
With a big load of data in the highchart, chart.xAxis[0].setExtremes(min, max) seems to take too much time. I wonder if I can set the extremes directly at the creation of the chart, for example when I define the xAxis:
xAxis: [{
categories: periods
}],
How can I do that? I don't find anything in the reference api.
You need to set xAxis.min & xAxis.max properties.