I have some sets of data that will only have 5 options, but they are not evenly distributed. For example, one set will be [1600, 1650, 1700, 1800, 1850]. I can't figure out how to get the axis to either hide "1750" or customize my own labels. Not even sure if those are the "labels" or "ticks".
You can override the callback in the ticks setting to determine what label is displayed, for example:
ticks: {
callback: function (value, index, values) {
return (value % 2 === 0) ? value : "";
},
Will only display the labels for the even values and hide the rest. You can customise this function to do whatever you want, including adding symbols to the labels.
Related
Example of Stacked Y-Axes
I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.
When I keep the scales object simple like this:
scales: {
y: {
stacked: true,
title: {
display: true,
text: "Temperature (°C)",
}
},
x: {
type: "time",
time: {
tooltipFormat: "LTS",
unit: "hour",
},
title: {
display: true,
text: "Datetime",
},
}
},
I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)
Additive Y-Axis example
It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!
With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.
How to fix the number of gridlines in X-Axis as label are too condensed.
Example: https://www.chartjs.org/samples/latest/charts/line/basic.html
If we add 60+ Data labels are too condensed, then after some more values axis lines adjust to hide some value in between to show label properly.
Is there a way to control trigger point which adjusts the axis line number ?
Assuming you defined xAxes.time.unit: 'month', you can define time.stepSize as follows.
xAxes: [{
type: 'time',
time: {
unit: 'month',
stepSize: 2
},
time.stepSize: the number of units between grid lines.
Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
I had some code that set my V axis scale from 0 - 4. However I deleted it and now I cannot remember how I got it working again. See below for my chart code, and the code I think I used before.
This is what I think I used before...
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:99.8
}
}
Below is my chart
// Create a line chart, passing some options
var LineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
//'width': 300,
'height': 300,
'legend': 'top',
'backgroundColor': '#eeeeee',
'colors': [ '#8ea23f'],
'pointSize': 5,
'title': 'Selected Site and Species abundance over time'
},
'view':{'columns':[0,2]},
});
There you go:
'vAxis': {'title': 'Something Here',
'minValue': 0,
'maxValue': 4},
There are two approaches to take, depending on what you need. The first one (shown by Tom's answer) sets alternative min and max values for the data set sent to the chart, eg. the chart interprets the maximum data value is must accommodate as MAX(vAxis.maxValue, data set max value). If the data set goes outside the bounds of vAxis.minValue/maxValue, those options will essentially be ignored. Also, the chart's actual axis range is only based on the min/max values - the values displayed will include the min/max, but might go beyond the min/max in order to produce clean intervals between axis labels.
If you need to explicitly limit the axis to a specific range, where your min and max values are the absolute limits you want displayed, then you use the vAxis.viewWindow.min/max options.
I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks
You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/
The tooltips can be set to display percentages using the following code:
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 1); // Apply formatter to first column.
Is there a way for NumberFormat to multiply each element by 100? Otherwise the tooltip appears as .50%.
I am using vAxis.format = "format:'#%' " which does multiply by 100. So .5 is displayed as 50% on the vertical axis.
According to the documentation(icu-project.org/apiref), this can be overwritten by enclosing the % in single quotes, but this did not work.
The net result is that the tooltips do not match the axis. What is the best way to do this?
I got this working by specifying a formatter exactly as you do:
var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(chartData, 1);
The 1 in the last call means the second column, in which I have float values.
Then I specify a format for the axis in the chart options, escaping the percentage sign as pointed out by documentation and others here:
var chartOptions = {
vAxis: { format: '#\'%\'' }
};
I then draw the chart:
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);
This renders a left side axis with values like 10%, 20% and so on. And the tooltips looks like the default one but with a percentage like 10.10%, 20.20% and so on.
If you want two fraction digits in the left side axis as well, use this as format in the chart options instead:
vAxis: { format: '#.00\'%\'' }
var formatter = new google.visualization.NumberFormat({
pattern: '#%',
fractionDigits: 2
});
Thanks to http://groups.google.com/group/google-visualization-api/
You must surround the percent (%) symbol itself in single quotes.
The line I used to do this looks like this: options['vAxis'] = {'format': "#,###'%'"};
Combining this with your formatter above, you can make the vertical axis have a percent symbol and also make the tooltip include it too.
Ok... So this is a little late. I admit I didn't need this seven years ago. Nevertheless, this worked for me.
var rows = data.getNumberOfRows();
for (var i = 0; i < rows; i++) {
data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}
In my case, I am using four columns, two of which are assigned to the right axis with percentages. I wanted those columns' tooltips to reflect the proper percentage rather than the decimal representation.
Here is a link to the Google docs:
https://developers.google.com/chart/interactive/docs/reference#DataTable_setFormattedValue
I hope this helps some random stranger looking for it. ;)