Is it possible to set custom x axis labels in Chart.js? Currently I'm using my array of indexes but is is hard to read anything on this chart, so I would like to scale it and show only specified indexes.
For example: instead [1,2,3,4,5,6,7,8,9,10], I would like to set [1,5,10]
With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.
The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.
For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:
if (ix % 10 == 0) {
labels[ix]="Label";
} else {
labels[ix]="";
}
Related
I have a Highcharts line chart with multiple series. The X axis is a datetime axis. One series is a step line and the max data point for this can finish before the other series on the x axis, e.g. 5 days before the end.
Is there an easy way of extending this line to the end of the chart automatically without filling in the extra data points before the data is passed to Highcharts? The line should just carry on to the end of the chart at the same y coordinate as the last plotted point.
I have already tried setting minPadding and maxPadding to 0 along with start/endOnTick to false, but this had no effect.
Thanks!
See answer here:
continue the line drawing on dotnet highchart
The basic idea is to
1) retrieve the final y value of your data
2) retrieve the final x value that you want it to extend until
3) add a new point to the data with those x and y values.
I'm using Highstock (v4.2.3) to present data in a StockChart with a number of different Y axes, all plotted against time on the X axis. The data has gaps in it, and I'd like to depict those gaps, but when I turn on gapSize (with any value other than zero), there's a weird quirk that causes line rendering issues--when using the navigator to zoom in on certain date ranges (not all), in some cases (whose pattern I've yet to discern) the chart fails to fully render the line across the entire x axis.
This annotated screenshot depicts the issue.
When I turn gapSize off (or explicitly set it to zero), this problem goes away. Note that the gaps themselves appear correctly on the chart (when navigating to a date range that doesn't present the line rendering issue).
plotOptions: {
series: {gapSize:2}
}
Any ideas?
jsFiddle with your issue:
http://jsfiddle.net/2N52H/109/
As you can read in our API:
http://api.highcharts.com/highstock#plotOptions.line.gapSize
A gap size of 5 means that if the distance between two points is
greater than five times that of the two closest points, the graph will
be broken
As far as I know data you have has random gaps so you will never know what is the distance between two closest points. For example if you will have data in every one hour, distance between two closest points will be 15 minutes and your gapSize will be set to 2, you will see only your closest points.
When you are using zoom sometimes your visible data closest distance is changing so the gaps are changing as well.
See this example:
http://jsfiddle.net/2N52H/111/
Maybe you can use xAxis.ordinal parameter to visualise your gaps:
http://api.highcharts.com/highstock#xAxis.ordinal
You can also change standard functionallity by using wrapper. Here you can read about it:
http://www.highcharts.com/docs/extending-highcharts/extending-highcharts
For example you can change gappedPath function:
(function(H) {
H.wrap(H.Series.prototype, 'gappedPath', function(proceed) {
var gapSize = this.options.gapSize,
xAxis = this.xAxis,
points = this.points.slice(),
i = points.length - 1;
if (gapSize && i > 0) { // #5008
// extension for ordinal breaks
while (i--) {
if (points[i + 1].x - points[i].x > gapSize) {
points.splice( // insert after this one
i + 1,
0, {
isNull: true
}
);
}
}
}
return this.getGraphPath(points);
})
}(Highcharts))
example:
http://jsfiddle.net/2N52H/113/
Kind regards.
I have a line chart with x Axis being numeric and y axis being numeric as well. I want the y axis to be reversed so that higher values are at the bottom of the axis and lower values at the top. I looked at the API Docu and didnt find a config to reverse the axis or so. Any clues?
In ExtJS 3 there was a reverse config option to get this going. With ExtJS 4 you have to use workarounds.
For reverting the x axis values you could use the sorters property of the store connected to the chart.
But for reverting the y axis you have to convert your values. Here's a sample on how to achieve this: http://www.sencha.com/forum/showthread.php?132148-What-has-happen-to-quot-reverse-quot-config-on-chart-axes&p=949699&viewfull=1#post949699
I am trying to use the setFormattedValue() function from the DataTable class to modify the look of the labels across the horizontal axis on a line chart, but the values are not being formatted. The labels remain in their default values created by setValue().
For example, the following code does not produce 00:36:45 on the axis, but rather, just 2205.
var table = new google.visualization.DataTable();
table.addRows(1);
table.addColumn('number', 'time');
table.addColumn('number', 'altitude');
table.setValue(0, 0, 2205);
table.setFormattedValue(0, 0, '00:36:45');
table.setValue(0, 1, 35);
var chart = new google.visualization.LineChart($('chartdiv'));
chart.draw(table);
I don't understand what I'm doing wrong. Shouldn't setFormattedValue() cause the label to be shown as 00:36:45 instead of 2205?
If this isn't the right way to change the look of the axis labels, then how should it be done? I can't change the column type to string because the plotted line is based on numerical x/y coordinates.
You said you can't change the column type to string but, can you change it to Date? The axis is showing a number because you declared both columns as number type.
I can't see the relation between 00:36:45 and 2205. Is 2205 a value you get at that time? If you drawed more points in your line chart, you could check if their labels are the formatted value you are setting.
Partial solution:
replace chart.draw(table); with:
chart.draw(table, {
hAxis: {
ticks: [
{v:2205, f:'00:36:45'},
{v:35, f:35}
]
}
});
ticks allows you to map any value and its representation on the axis, but i think you have to list values for all labels you want. (But this could be automated by custom script)
If you visit the URL below you will see that the graph is being generated properly, but that there are not labels along the x and y axis to indicate the data values:
http://chart.apis.google.com/chart?chs=600x300&chtt=Release+Burndown&cht=lc&chdl=estimated|actual&chco=FF0000,00FF00&chxr=0,0,30,2|1,0,40,2&chds=0,45&chd=t:45,34,23,12,0|45,20,15,32,31,25,0
Can anyone figure out how to get the x and y axis data values to show up?
According to the API, you can do this through the chxX parameters:
http://code.google.com/apis/chart/image/docs/gallery/line_charts.html#gcharts_axis_styles_labels
chx1: make custom values as labels
chxs and chxtc: to specify color, size, alignment, and other properties of both custom and numeric axis labels
Let me know if you can't figure it out.