I am opening a new question following Rohit's answer on this question Chart.js Show labels on Pie chart
Is it possible to modify the labels with the plugin chartjs datalabels, for exemple add a unit to it?
Thanks for your answer!
EDIT:
Following Ty answer, I tried this:
if(type==='pie'){
GraphOpt['plugins'] = {
datalabels: {
formatter: (item) => {
return item + ' ' + label_unit;
}
}
}
}
else{
GraphOpt['tooltips'] = {
callbacks: {
label: (item) => `${item.yLabel} ${label_unit}`,
}
}
}
but it's still not showing the units on the graph.
Also, I can't get rid of the values showing on bar graphes with the plugin
EDIT2: My graph function
function setChart(Graph, ctx, type, graph_data, labels, title, label_graph, label_unit){
var GraphOpt = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display:true,
text: title,
},
tooltips: {},
plugins : {}
}
//graph config
var Graph_config = {
type: type,
data: {
labels: labels,
datasets: [{
label: label_graph,
data: graph_data,
backgroundColor: backgroundColor,
borderColor: backgroundColor,
borderWidth: 1
}]
},
options: GraphOpt,
}
if(type==='pie'){
GraphOpt['plugins'] = {
datalabels: {
formatter: (item) => {
return item + ' ' + label_unit;
}
}
}
}
else{
GraphOpt['tooltips'] = {
callbacks: {
label: (item) => `${item.yLabel} ${label_unit}`,
}
}
}
//create a new graph if graph doesn't exist (init)
console.log(typeof window[Graph])
if(typeof window[Graph] === "undefined") {
window[Graph] = new Chart(ctx, Graph_config);
console.log(typeof window[Graph])
//update if graph exist
}else{
console.log('Graph Update')
//updating with new chart data
window[Graph].config=Graph_config;
window[Graph].title=title;
//redraw the chart
window[Graph].update();
}
}
Yes, have a look at the chartjs-plugin-datalabels documentation. In particular, you want to use the options.plugins.datalabels.formatter option to specify a custom function and append units to every label string.
Here's an example Chart.js config that adds a unit to every data label:
{
type: 'pie',
data: {
datasets: [
{
data: [84, 28, 57, 97],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
],
label: 'Dataset 1',
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green'],
},
options: {
plugins: {
datalabels: {
formatter: (val) => {
return val + ' kg';
}
}
}
}
}
Related
I need to make a chart at the level with a row in the table, are there any tips on how to implement this enter image description here
I need the chart lines to match the row level in the table
and this code draws a separate chart
const diag = () => {
document.getElementById("canvasic").innerHTML = ' ';
document.getElementById("canvasic").innerHTML = '<canvas id="densityChart" className="canav"></canvas>';
densityCanvas = document.getElementById("densityChart");
//remove canvas from container
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.global.defaultFontSize = 16;
var densityData = {
label: 'CallVol',
data:calloiList1,
backgroundColor: 'rgba(0,128,0, 0.6)',
borderColor: 'rgba(0,128,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var densityData1 = {
label: 'PutVol',
data:calloiList3 ,
backgroundColor: 'rgba(255,0,0, 0.6)',
borderColor: 'rgba(255,0,0, 1)',
borderWidth: 2,
hoverBorderWidth: 0
};
var chartOptions = {
scales: {
yAxes: [{
barPercentage: 0.5
}]
},
elements: {
rectangle: {
borderSkipped: 'left',
}
}
};
var barChart = new Chart(densityCanvas, {
type: 'horizontalBar',
data: {
labels: calloiList4,
datasets: [densityData,densityData1],
},
options: chartOptions
}
);
}
enter image description here
So I'm trying to make a JS function that uses ChartJS, the variable/data the fucntion gets, is a JSON object. The reason why I use try/catch is because the two lines under here:
let labels = json_data.data.map(e => e.StartTime);
let data = json_data.data.map(e => e.StatusId);
Isn't always set if there is any data they are set, but if not is the only one set
let data = json_data.message.map(e => e.message);
Unless on page load, then nothing is set.
The JSON object change when a <Select> dropdown is changed, and if there is data in one then the canvas is loaded, but if the user then select one with no data, I want the graft to be empty/destroyed, but I cant do this because I'm in a try catch, and if I define it in the catch too, then it says that the ID already is in use. What do I have to do to "reset/destroy" it in the catch?
function chartJSLoad(json_data) {
try {
let labels = json_data.data.map(e => e.StartTime);
let data = json_data.data.map(e => e.StatusId);
console.log(labels);
console.log(data);
var ctx = document.getElementById('canvaschartjs').getContext('2d');
var myChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: data,
backgroundColor: 'rgba(0, 150, 90)',
borderColor: 'rgba(0, 255, 90)',
order: 2
}, {
type: 'line',
label: 'Line Dataset',
data: data,
backgroundColor: 'rgba(150, 0, 90)',
borderColor: 'rgba(255, 0, 90)',
order: 1
}],
labels: labels
},
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
} catch (error) {
if (typeof json_data !== 'undefined') {
myChart.destroy();
alert(json_data.message);
}
}
}
You can use the static method getChart to check if a chart with that context already exists, if it does you get that chart instance which you can destroy:
catch (error) {
if (typeof json_data !== 'undefined') {
let chart = Chart.getChart('canvaschartjs');
if (typeof chart !== 'undefined') {
chart.destroy()
}
alert(json_data.message);
}
}
Live example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
let myChart = new Chart(ctx, options);
let chart = Chart.getChart('chartJSContainer');
if (typeof chart !== 'undefined') {
chart.destroy() // Does not show anything because of this line, comment it out to show again
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
My goal is to update my chart with new data from the server. Here's my code:
(function () {
'use strict';
let color = Chart.helpers.color;
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
let timeAxis = [{
type: 'time',
}];
let percentAxis = [{
ticks: {
beginAtZero: false,
callback: function(value) {
return Math.round(value * 1000) / 10 + '%';
}
}
}];
let buildChartObject = function (ctx, type, xAxes, yAxes) {
return new Chart(ctx, {
type: type,
data: null,
options: {
responsive: true,
title: {
display: true,
fontStyle: 'normal',
padding: 10,
fontSize: 12
},
scales: {
xAxes: xAxes,
yAxes: yAxes
},
legend: {
display: false
}
}
});
};
let loadChartData = function (endpoint, chart, params) {
$.ajax({
url: '/api/v1/' + endpoint,
method: 'GET',
dataType: 'json',
params: params,
success: function (d) {
let bgColors = null, bdColors = null;
if (chart.config.type === 'line') {
bgColors = color(window.chartColors.blue).alpha(0.5).rgbString();
bdColors = window.chartColors.blue;
} else {
bgColors = d.data.map(
(value) => value < 0 ? color(window.chartColors.red).alpha(0.5).rgbString() :
color(window.chartColors.green).alpha(0.5).rgbString()
);
bdColors = d.data.map(
(value) => value < 0 ? window.chartColors.red : window.chartColors.green
);
}
if (chart.options.scales.xAxes[0].type === 'time') {
let dateUnits = {
daily: 'day',
weekly: 'week',
monthly: 'month',
yearly: 'year'
};
chart.options.scales.xAxes[0].time.unit = dateUnits[d.params.convertTo];
}
chart.options.title.text = d.name;
chart.data.labels = d.index;
chart.data.datasets[0] = {
backgroundColor: bgColors,
borderColor: bdColors,
borderWidth: 1,
data: d.data
};
chart.update();
}
});
};
let loadCharts = function () {
let params = {
convertTo: $('#convert-to').val()
}
let returnsChart = buildChartObject($('#chart'), 'bar', timeAxis, percentAxis);
loadChartData('endpoint', returnsChart, params);
}
loadCharts();
$('#convert-to').on('change', function() {
loadCharts();
});
}());
The initial call to loadCharts() correctly populates the chart. However when when the #convert-to event is triggered, the loadCharts reloads the data but I have this flickering effect of both charts drawn on the same canvas. This is not a bug or a related issue, rather a canvas drawing one.
Have a look here: https://www.dropbox.com/s/9onofdazkvp9uas/clip.mov?dl=0
I've read countless threads on this and it seems like chart.update() should solve the issue. From the docs: "[update()] triggers an update of the chart. This can be safely called after updating the data object. This will update all scales, legends, and then re-render the chart."
What am I doing wrong?
You don't need to call buildChartObject(...) again when you are trying to just update the data for the chart. If you held onto a reference of the chart you would be fine to skip that call. Doing this will allow Chart.js to just update the chart when you call chart.update() instead of creating a new chart and then updating it.
...
let returnsChart = buildChartObject($('#chart'), 'bar', timeAxis, percentAxis);
let loadCharts = function () {
let params = {
convertTo: $('#convert-to').val()
};
loadChartData('endpoint', returnsChart, params);
}
loadCharts();
$('#convert-to').on('change', function() {
loadCharts();
});
...
How do I modify an existing legend in Chart.js?
I've seen complex methods of creating a custom HTML legend (using generateLegend or legendCallback), and a simple method of options.legend.legendText which should accept an array, but saw no change so assumed that was for version 1.
I'm looking to add text to the default legend:
type: 'doughnut',
data: {
datasets: [{
data: series,
}],
labels: labels,
},
options: {
legend: {
legendText = labels.map((label, index) => `${label} - ${series[index]}%`);
}
}
Edit:
I noticed that if the chart was redrawn (e.g. if the browser window is resized) the legend would lose the extra text.
I've modified the approach to work as an inline plugin so that the label object is modified before the legend is drawn.
let labels = ['a', 'b', 'c', 'd'],
series = [4, 2, 1, 3],
myChart = new Chart(document.getElementById('chart'), {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: series,
backgroundColor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
maintainAspectRatio: false
},
plugins: [{
afterLayout: function(chart) {
let total = chart.data.datasets[0].data.reduce((a, b) => {
return a + b;
});
chart.legend.legendItems.forEach(
(label) => {
let value = chart.data.datasets[0].data[label.index];
label.text += ' - ' + (value / total * 100).toFixed(0) + '%'
return label;
}
)
}
}]
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
Chart.js 3.xx
I've included a sample for version 3.5 too.
You can alter the legend text by overriding the generateLabels method.
let labels = ['a', 'b', 'c', 'd'],
series = [4, 2, 1, 3],
myChart = new Chart(document.getElementById('chart'), {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: series,
backgroundColor: ['red', 'blue', 'green', 'orange']
}]
},
options: {
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: "bottom",
align: "center",
fontFamily: "Arial",
labels: {
usePointStyle: true,
fontColor: "red",
generateLabels(chart) {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
const {labels: {pointStyle}} = chart.legend.options;
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
const style = meta.controller.getStyle(i);
return {
text: 'This is ' + label + ' - ' + chart.data.datasets[0].data[i],
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
pointStyle: pointStyle,
hidden: !chart.getDataVisibility(i),
index: i
};
});
}
return [];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>
Is it possible to change the dataset labels that show up in the tooltip for a bubble chart.js chart?
As it stands right now, the dataset is based off the x,y,r values, but I'd like to inject some additional content, so that instead of reading (5,55,27.5) it reads something like: (Day:5, Total:55). I'd like to leave off the radius of 27.5 in the tooltip.
Yes! It is possible.
To achieve that, you can use the following tooltip's label callback function :
tooltips: {
callbacks: {
label: function(t, d) {
return d.datasets[t.datasetIndex].label +
': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')';
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var chart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Bubble',
data: [{
x: 5,
y: 55,
r: 27.5
}],
backgroundColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
tooltips: {
callbacks: {
label: function(t, d) {
return d.datasets[t.datasetIndex].label +
': (Day:' + t.xLabel + ', Total:' + t.yLabel + ')';
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
The previous answer doesn't work as of Chart.JS V3 because of these changes:
https://github.com/chartjs/Chart.js/blob/master/docs/migration/v3-migration.md
The following code works in 4.1.1:
var chart = new Chart(ctx, {
type: 'bubble',
data: {
datasets: [{
label: 'Bubble',
data: [{
x: 5,
y: 55,
r: 27.5
}],
backgroundColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: function(item) {
return item.raw.r
}
}
}
}
}
});
<script src="https://npmcdn.com/chart.js#latest/dist/chart.umd.js"></script>
<canvas id="ctx"></canvas>