I use a bar chart from chart.js as shown below
bar chart
now I would like to show 4 decimals instead of 3,
but I can only find how to do this for line charts.
Can anyone help me out here?
All values are formatted to 3 decimals by default in Chart.js and there doesn't seem to be a setting that allows you to change the number of decimals directly.
Instead, you can use the raw value and format it yourself by overriding the label callback in the chart options:
.
.
.
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return Number((context.raw || 0)).toFixed(4);
}
}
}
}
.
.
.
Edit: Added a working example to demonstrate 4 decimals showing in a bar chart:
https://jsfiddle.net/j2Lwbmu8/
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.
I have a strange behavior that seems like a bug to me. I have a bar chart with one dataset with 2 points, but 1 is not shown, though it works fine with 3 or with horizontal bar e.g.
Is it a known bug of some kind that can be worked around? It seems that the chart does not scale itself well enough and one of the bars is below the "visibility point" somehow.
The problem was apparently that the Y-axis started not at 0 by default. It's possible to add an option for that:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
I am using a ColumnChart of google charts
and using DataView i am displaying values for the bar and line
Bar and line chart on same graph i am displaying using
series: {
0: { targetAxisIndex: 0 , type: "bars"},
1: { targetAxisIndex: 1, type: "line"},
},
Also i am getting the data from service : using json
The annotations are overlapping in my case due to high numbers. Searching for a solution.
Please suggest.
Thanks!
I have a google chart that has a vAxis setting as below ..
vAxis: {
textStyle: { color: 'white' },
baselineColor: '#666666',
format: '######.#'
},
but longer than 1000 integer in vAxis label append 3 dots ( . ) and not showing the entire lable, so like if the actual label is 2000 then it is only showing 2... Can anyone please advise how could I show entire label 2000 instead of 2...
thanks in advance.
Google calculate the width of the label and make the adjustment in label in terms of adding dots at the end. So workaround would be increasing chart width or decreasing label font size. I decreased the font size and that did the tricks :)
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. ;)