Develop Reference

Chart JS : Display the percentage of labels without getContext('2d')

I'm using the library chartJs to display the data that i get from my MySQL database.
In the fucntion below, AddValuesToNavigatorChart takes the browsers data and the percentage data and displays them on the pie chart.
What i need to know, is how to add '%' in my labels ?
I found few answer with getContent('2d').. using the old way, but it's not working.
This is the function :
function AddValuesToNavigatorChart(browsers, percentage) {
checkNavigatorChart()
const data = {
labels: browsers,
datasets: [{
data: percentage,
backgroundColor: [
'rgb(192,192,192)',
'rgb(255,0,0)',
'rgb(0,0,0)',
'rgb(105,105,105)'
],
hoverOffset: 4
}]
};
const config = {
tooltips: {
enabled: false
},
type: 'pie',
data: data,
plugins: [ChartDataLabels],
options: {
showTooltips: false,
plugins: {
datalabels: {
color: 'rgb(255,255,255)',
borderWidth: '2',
align: 'top'
},
legend: {
position: 'bottom',
align: 'center',
labels: {
boxWidth: 12,
padding: 15,
usePointStyle: true,
pointStyle: 'circle'
}
},
title: {
text: 'Navigator Chart',
display: true,
color: 'rgb(0,0,0)',
position: 'top'
}
}
}
};
const NavigatorChart = new Chart(
document.getElementById('NavigatorChart'),
config
);
}

Please provide the version of chartjs that you are using.
Did you mean you want to show the % in the label of the tooltip?
For version v3.8.0, here is a working code I have just made, Link
As in option, you can edit the label of tooltip as you want:
options: {
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) => {
//tooltipItem is for the slice of the pie you are hovering now
return ' ' + tooltipItem.parsed + '%';
},
}
}
}
}

How can I create a dynamically assigned variable for a chart with chart.js?

I am trying to create a series of line chart dynamically and then update them once the data has been updated for a particular user in real-time.
I am running into difficulty because I can only get the most recent one to render.
I think this is because when the following code runs it overwrites the ctx variable and I lose the earlier charts.
I tried the following technique with dynamic variables so no two ctx variables would be the same, but it doesn't work.
Thanks in advance for your help.
window['ctx_'+userid] = document.getElementById("forceCurveGraph_"+userid).getContext("2d");
window['myLineChart'+userid] = new Chart(window['ctx_'+userid], {
type: 'line', data: {
datasets: [{
label: "Force Curve",
data: forcecurvedata, backgroundColor: ['rgba(57,118,251, 0.8)']
}],
labels: labels
}, options: {
backgroundColor: ['rgba(40, 84, 141, 0.3)'],
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: graphMax
}
}],
xAxes: [{
ticks: {
display: false
}
}]
}
}
})

How to hide label for chart.js

I have chart which show 3 types of label
I want to keep two of them and want to hide one Invoice Income Report. How can I hide that one label? I am using chart.js v2
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Invoice Income Report',
data: bar_chart_data,
backgroundColor: colors,
borderWidth: 1
}, {
label: 'Below Average',
backgroundColor: ['rgba(255, 99, 132, 1)']
}, {
label: 'Above Average',
backgroundColor: ['rgba(11, 156, 49, 1)']
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
},
}
});

You can simply make display false.
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
display: false,
},
title: {
display: false,
text: 'Chart.js Line Chart',
},
},
};

To hide the labels on version 4.2.1 of chart.js use this:
// Example chart.
const chart = new Chart(id, {
type: 'bar', // Chart type.
data: data, // Your data.
options: {
// Add plugins to options.
plugins: {
legend: {
display: false // This hides all text in the legend and also the labels.
}
}
// add your scales or other options.
}
});
For more info use the doc: https://www.chartjs.org/docs/latest/configuration/legend.html

In chart.js, You can hide the labels using legend attribute. Add the following code in options of chart.js
legend: {
display: false
}
According to your code, after adding legend the options will be .....
options: {
scales: {
y: {
beginAtZero: true
}
},
legend: {
display: false
}
}

Add legend option to options configuration, set display to false:
, options: {
scales: {
y: {
beginAtZero: true
}
},
legend: {
display: false
}
}
docs3:https://www.chartjs.org/docs/latest/configuration/legend.html
docs2:https://www.chartjs.org/docs/2.6.0/configuration/legend.html

Dynamic stacked column in CanvasJS

How can I create a stacked column chart with dynamic data?
For example, I have an external JSON object like:
[
{
id : ‘ID123’,
occurrences: [5,6,8],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
},
{
id : ‘ID456’,
occurrences: [7,2,12],
description: ["Hours spent working", "Hours spent skiing", "Hours spent studying"]
}
]
How do I make it so there would be two stacked columns using the id as the label and the array of occurrences is used to build the stacked column on top of each label?
Edit:
Added representation of how graph should look

I would suggest using chart.js for this as it will be much easier than building it out yourself. Here is a example using the data you provided.
var barChartData = {
labels: ['ID123', 'ID456'],
datasets: [{
label: 'Hours spent working',
backgroundColor: '#FF0000',
data: [
5,
7
]
}, {
label: 'Hours spent skiing',
backgroundColor: '#00FF00',
data: [
6,
2
]
}, {
label: 'Hours spent studying',
backgroundColor: '#0000FF',
data: [
8,
12,
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

Chart data isnt showing in the canvas but console.log shows the expected values

So its my first time using chartjs. Im trying to use stacked horizontal charts. I have 2 values which I calculate using some sort function. I do console.logs to check if values are correct and they are both as expected. But when i try to update the chart only the first value shows in the canvas, and the 2nd value shows 0 but my chart gridlines adjusts correctly. Im not too sure what is happening.
Here is where I declare my chart data
var eventDays1 = 0;
var eventDays2 = 0;
var barChartData = {
labels: ['Events'],
datasets: [{
label: eventName1,
backgroundColor: "#E5C1BD",
data:[eventDays1]
}, {
label: eventName2,
backgroundColor: "#D2D0BA",
data:[eventDays2]
}
]};
Here is the actual chart
myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: barChartData,
options: {
legend: {
display: true,
labels: {
fontColor: 'black',
fontSize:20,
}
},
responsive: true,
scales: {
xAxes: [{ stacked: false,
ticks:{
fontColor:"black"
},
scaleLabel: {
display: true,
labelString: 'Days',
fontColor:"black"
}
}],
yAxes: [{
ticks: {
beginAtZero:true,
max:365,
fontColor:"black"
},
stacked: true,
}]
}
},
});
Here is my updateChart function that I call. Note that the console.logs
are values that I expect already.
function updateChart(newList){
eventDays1 = newList[0];
if(newList.length == 2){
eventDays2 = newList[1];
}
myBarChart.data.datasets[0].data[0] = eventDays1;
myBarChart.data.datasets[0].data[1] = eventDays2;
console.log("data 1 "+eventDays1);
console.log("data 2 "+eventDays2);
myBarChart.update();
}