I got a problem with a Highcharts Graph. It's a line stock-chart and it works quite well if there are just a few hundred data points but if I try to display a few thousand it shows (in the tooltip) more than 2 up to 13 decimals (eg 16.5772857142857). I'm rounding the data at the beginning to 2 decimals and "valueDecimals" is at 2 in the tooltip. I guess if there are too many data points which are very close, Highcharts tries to find an average. Does someone knows how to limit the decimals generally or had the same problem?
That is caused by dataGrouping feature. You can read more about it in the docs. To turn it off, set:
series: [{
dataGrouping: {
enabled: false
},
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/3x06skoc/
API Reference: https://api.highcharts.com/highstock/series.line.dataGrouping.enabled
Docs: https://www.highcharts.com/docs/stock/data-grouping
Related
I´m setting up a preview for a graph, and I want to know if highcharts has any option for reducing the number of points showed in a series. I have points everyday in 5 years, and I would like to reduce for a simple preview. Is this possible?
You can reduce the number of points by your own function, but I think that the best solution will be to use provided by Highstock dataGrouping feature:
series: [{
dataGrouping: {
enabled: true
},
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/3ky0s2oh/
API Reference: https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.enabled
Docs: https://www.highcharts.com/docs/stock/data-grouping
The data being passed to HighStocks is:
[[1505433600000,"15000.0"],
[1505692800000,"15000.0"],
[1505779200000,"15002.4785072264849164674"],
[1505865600000,"15004.95789197307424571901"],
[1505952000000,"15007.4381546342814965765"],
[1506038400000,"15009.9192956046704969869"],
[1506297600000,"15012.40131495591828960078"]]
The config for the xAxis is:
{tickWidth: 1, tickLength: 5, gridLineWidth: 0}
Although I don't think it matters.
Finally, the result is:
The issue is: the points are perfectly placed and equally spaced, which is exactly what I want. The ticks, on the other hand, are weirdly uneven with the most notable being the 23/09 tick being much closer than 25/09 than it should.
The ideal here is that the ticks just follow the data points, or even that the ticks are evenly divided. That said, it isn't a matter of 'ordinal', since I don't want dates that weren't present to be displayed (weekends).
I tried messing with options and figuring it out, but I can't pinpoint why this happens. It seems it shouldn't.
You need to use ordinal: false (Link to the doc)
Your CodePen updated to line 29 of the JS part
If you want to display ticks exactly where the points are, use tickPositions array.
API Reference:
http://api.highcharts.com/highcharts/xAxis.tickPositions
http://api.highcharts.com/highcharts/Highcharts.dateFormat
Example:
http://jsfiddle.net/g4uyo5q7/
I have a (Highcharts) graph with a percentage over time. The input for my series looks something like:
series: [{
name: "Percentage",
data: [
[1472515200000, 49],
[1472601600000, 48.83],
[1472688000000, 49.6],
[1472774400000, 48.77]
]
}]
However on the actual chart (areaspline) I get different values:
30 Aug, 48.91
31 Aug, 49.36
1 Sep, 49.6
2 Sep, 48.87
Not entirely sure why this is the case, I'm assuming it's because the graph has a datetime type and it's figuring out the average over time. Is there a way I can make the values exact as they are input? Couldn't find anything in docs
Thanks for any ideas/help/advice.
Upon further research, it seems like it's not so much a Highcharts problem but a React one. I seem to be getting different values on each render. Will look into this further and update for the curious.
Problem seemed to be related to React re-rendering and therefore recalculating my percentage values - not a Highcharts issue. Thanks for everyone who commented, bit of a wild goose chase.
Jamie, to make the input values be taken literally, you need to either leave the type value of your x-axis unset or change it to type: 'literal'.
Here's a basic fiddle I created with your data to show how it can be interpreted exactly as input (vs. converted to dates): http://jsfiddle.net/brightmatrix/vtLswcex/1/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ',' // adds comma for axis labels
}
});
Highcharts.chart('container', {
xAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value,0);
}
}
},
series: [{
name: "Percentage",
data: [
[1472515200000, 49],
[1472601600000, 48.83],
[1472688000000, 49.6],
[1472774400000, 48.77]
]
}]
});
});
Note that I've added formatting for the x-axis labels, as well as a thousands separator in the Highcharts.setOptions() function, so that your labels will be more easily readable as trillions.
Does this help answer your question? If you are instead looking for a better way to format time-specific data, the comment by #morganfree is well worth looking into.
I'm working on a project using google data visualization API and I'm trying to show a chart illustrating the numbers of visits of users during the last week .
the problem is that this number is always an integer and greater or equal to 0 but on my chart the Y-axis show decimal numbers .
how can I configure the options array to get only integers ?
From How to show only integers (no decimals) in chart API x/y-axis labels, user asgallant suggests this:
vAxis: {
format: '#'
}
In that same thread, user Daniel LaLiberte says this:
If you specify a format of '#' you will only see only whole integer values. But if a value that is rounded is not close to an integer, the tick will appear to be in the wrong position, or the label will be wrong for the tick.
The Google Charts API assumes you want 5 gridlines in many cases, and depending on where your data values fall, 5 gridlines may not work out to give you integer tick values.
The better thing to do is to turn on the variable number of gridlines feature by specifying:
gridlines: { count: -1}
Then it tries hard to give you nice round tick values.
You can also specify exactly what tick values you want by using the 'ticks' option.
gridlines: { ticks: [ -4, -2, 0, 2, 4 ] }
Finally, the official documentation: Customizing Axes: Number Formats
I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},