I am working on a line chart. I have many readings for 1 day and I need to display data for 30 days. How can I display the average for each day instead of showing every data points?
If you are using datetime xAxis you can use Highstock and use the dataGrouping property for that:
plotOptions: {
line: {
enabled: true,
forced: true,
dataGrouping: {
approximation: 'average',
units: [
[
'month', [1]]
]
}
}
}
This will automatically group your daily data to average of month. Here's the DEMO
Related
Here is a jsFiddle to my issue:
Highcharts.chart('container', {
xAxis: {
categories: [full arrray in fiddle],
labels: {
step: 1
}
},
series: [{
data: Array.from(Array(690).keys())
}]
});
https://jsfiddle.net/qws90dux/
The chart seems to only take the first and last label, why is this?
I think the reason this did not work is because of the amount of time needed to process each category which are long dates, this is basically what is written here
The solution was just to use xAxis.tickInterval instead, with the same interval as before.
Using this example from Highcharts for displaying grouped column chart with negative values
https://www.highcharts.com/demo/column-negative
When we have less attributes in x-axis, the distance between both bars of the same value becomes wider. Can we reduce this distance by using any option & make the two bars look close to each other for each month. Attaching output with question.
Sample chart
Options I am using are:
plotOptions: {
column: {
dataLabels: {
enabled: false
},
pointWidth: 15
},
series: {
centerInCategory: true
}
},
Using the groupPadding and pointWidth property you can adjust the space between the grouped columns.
plotOptions: {
column: {
dataLabels: {
enabled: false
},
groupPadding:0.35,
pointWidth: 25
}
},
API:
https://api.highcharts.com/highcharts/series.column.groupPadding
https://api.highcharts.com/highcharts/series.column.pointWidth
Live demo:
https://jsfiddle.net/BlackLabel/kfwz7gce/
I'm trying to add SMA (Simple moving average) into my highstock with dataGrouping.
dataGrouping works fine without SMA. But when I add SMA it only group data on daily basis. Has anyone got the same problem?
I've checked the chart element and I can see the series & SMA object they all got the dataGrouping attribute but still not display properly in the chart.
I tried to add dataGrouping in both plotOptions.series & plotOptions.sma or add it in series respectively but none of them work.
let dataGrouping = {
forced: true,
units: [
['week', [1]],
]
};
const options = {
//...
plotOptions: {
candlestick: {
color: 'green',
upColor: '#e00000',
},
series: {
marker: {
enabled: false,
},
states: {
hover: {
enabled: true,
lineWidth: 1.5,
}
},
dataGrouping,
},
sma: {
dataGrouping,
}
},
}
My highcharts verion is 6.0.7
I also tried to add dataGrouping on an official example and here's the link: http://jsfiddle.net/tuuz4yho/8/
and here's another example with a simple line chart
https://jsfiddle.net/Lyf6vzev/19/
But dataGrouping still not work on SMA lines.
Anyone know how to group SMA weekly or monthly?
Really need your help!
Thanks! :)
Turns out it's a known bug:
https://github.com/highcharts/highcharts/issues/7823
The workaround is setting dataGrouping.approximation and dataGrouping.groupPixelWidth in the indicator config.
Is there a way to create monthly candlesticks using daily data in highcharts
for example, I have daily close price as follows.
[
[1270425600000,33.57],
[1270512000000,34.03],
[1270598400000,34.25],
[1270684800000,34.35],
[1270771200000,34.49],
[1271030400000,34.60],
[1271116800000,34.55],
[1271203200000,35.04],
[1271289600000,35.11],
[1271376000000,35.51],
[1271635200000,35.29],
[1271721600000,35.51], etc
I want to create monthly candles based on that. Is there a way to do it with highcharts? Appreciate any help.
Highstock has data grouping feature - series.dataGrouping - and you can set options, so the data will be grouped into 1 month interval.
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
dataGrouping: {
forced: true,
units: [
['month', 1]
]
}
}]
example: http://jsfiddle.net/uyrz7bz1/
Which I am passing to:
series: [{
name: 'Fixed bugs',
data: fixed,
pointWidth: 40
}, {
name: 'Assigned Bugs',
data:assigned,
pointWidth: 40
}, {
name: 'Re-Opened Bugs',
data: Reopened,
pointWidth: 40
},
{
name: 'Closed Bugs',
data: closed,
pointWidth: 40
}]
to this chart and I have the data like this :
data: fixed=[3,5,5,8]
data:assigned=[0,1,0,0]
and follows. Now I want to show the column with zero value to... For me its not showing the column value with zero.
minPointLength will work. Use this.
plotOptions: {
column: {
minPointLength: 3
}
}
You can do this quite simply with the minPointLength option. It sets the minimum number of pixels per column, default is 0, so zero values don't show up. It's in the docs here.
Try this JSFiddle
Here is a way to do it - although I think just having the column be zero-valued and not visible is the best way.
Find a very very low number that none of your data points would ever have but still keep it >0. Let us say it is .005. When you bring in your data any value that is 0 assign it this .005 value. In your tooltip formatter do an IF on the value. If it is .005 then make it 0. This way you get to see the "zero" column but the tooltip displayed will be 0 as well. If you are doing any kind of calculation on the stacked columns then you need to account for this non-0 0 value in there as well.
Not sure what you are trying to display, but maybe you could try to show the datalabels like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
color: 'gray'
}
}
}
Attempt at demo