Develop Reference

How to add datalabels in stacked bar/line chart in chartJS

I am trying to add the datalabels onto my stacked bar/line chart in chartJS specifically at the line chart area. Because the values are not aligned with the Y-Axis, therefore I wanted to use chartJS datalabels plugin to show the values on top of the line chart only for better clarification when it is printed out.
What I tried:
#1 putting into config
const config = {
type: 'line',
data: data,
options: {
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: function(value, context) {
return GetValueFormatted(value);
},
borderRadius: 4,
color: 'white',
font: {
weight: 'bold'
},
formatter: Math.round,
padding: 6
},
title: {
display: true,
text: 'Menu Performance Chart'
},
},
scales: {
y: {
stacked: true
}
}
},
};
#2 putting into specific dataset
const data = {
labels: labels,
datasets: [{
label: 'Sub Total Sales (RM)',
data: [
'111',
'22',
'31',
'12',
'71',
'110',
'22',
],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
stack: 'combined',
type: 'bar'
},
{
label: 'Total Amount Sold',
data: [
'11',
'2',
'3',
'1',
'7',
'10',
'2',
],
borderColor: 'rgb(255, 159, 64)',
backgroundColor: 'rgba(255, 159, 64, 0.2)',
stack: 'combined',
datalabels: {
color: '#FFCE56'
}
},
]
};
I even tried the two at the same time to see if there were any results. Could anyone assist me with this? Thank you in advance.
Here is my code demo in JSFiddle:
https://jsfiddle.net/4gat7rzs/4/

The plugin is not registered. See doc: https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration
You should add the datalabels plugin instance to the chart config:
const config = {
type: 'line',
data: data,
plugins: [ChartDataLabels], // <- MUST BE ADDED
options: {
....

How to remove the extra Y axis from a bar chart in chart.js

I am trying to make a bar chart in chart.js I found some ready-made example and I am trying to adapt it for my requirements.
I don't know how to remove the double Y axis.
var densityCanvas = document.getElementById("densityChart");
Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
var densityData = {
label: 'Density of Planet (kg/m3)',
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderWidth: 0,
yAxisID: "y-axis-density"
};
var gravityData = {
label: 'Gravity of Planet (m/s2)',
data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
backgroundColor: 'rgba(99, 132, 0, 0.6)',
borderWidth: 0,
yAxisID: "y-axis-gravity"
};
var planetData = {
labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
datasets: [densityData, gravityData]
};
var chartOptions = {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.6
}],
yAxes: [{
id: "y-axis-density"
}, {
id: "y-axis-gravity"
}]
}
};
var barChart = new Chart(densityCanvas, {
type: 'bar',
data: planetData,
options: chartOptions
});
The code above provides this result.

checkout this example [JSFIDDLE](http://jsfiddle.net/p3g07d09/)

Chart.js: Some sectors not showing if difference is too big

I'm passing the following config to Chart.js:
{
type: 'doughnut',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
data: [878, 19020, 100412286],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
}
}
But because of the huge difference between all three (given how much bigger c is), c ends up "overlapping" everything else and I just get a doughnut with only one color, showing only c.
If I try a smaller value for c all three sectors show up fine.
But I don't understand, Chart.js should've been able to show all pieces (set a minimum size for the smallest sector etc.)
Is there some parameter I can pass to the config to fix this ?

You can use a logarithmic scale but only for lines. A donut is not a good choice for your use case
https://www.chartjs.org/docs/latest/samples/scales/log.html
Config:
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart - Logarithmic'
}
},
scales: {
x: {
display: true,
},
y: {
display: true,
type: 'logarithmic',
}
}
},
};
Setup:
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: logNumbers(DATA_COUNT),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
fill: false,
},
]
};
Action
const logNumbers = (num) => {
const data = [];
for (let i = 0; i < num; ++i) {
data.push(Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5)));
}
return data;
};
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = logNumbers(chart.data.labels.length);
});
chart.update();
}
},
];

One alternative is using 3 datasets, one for each data.
labels: ['a', 'b', 'c'],
datasets: [
{
label: "My First Dataset",
data: [878,0,0],
backgroundColor: [
"rgb(255, 205, 86)",
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
],
offset:0,
hoverOffset: 0,
},
{
label: "My First Dataset2",
data: [0,19020,0],
backgroundColor: [
"rgb(255, 205, 86)",
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
],
offset:0,
hoverOffset: 0,
},
{
label: "My First Dataset2",
data: [0,0,100412286],
backgroundColor: [
"rgb(255, 205, 86)",
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
],
offset:0,
hoverOffset: 0,
},
],
I hope this help.

chart.js add events note based on day

I've created a basic line graph using chart.jswith values distributed on time and I would like to add info about events that occurred on the same days.
This is the datasets used:
return {
labels: labels,
datasets: [
{
label: 'Kb',
type: 'line',
backgroundColor: '#2d627c',
data: data,
borderColor: '#79a6bc',
borderWidth: 1,
pointStyle: 'circle',
pointRadius: 0,
pointBorderColor: 'rgb(0, 0, 0)'
},
{
label: 'Events',
type: 'bar',
pointStyle: 'circle',
pointRadius: 10,
backgroundColor: '#f87979',
data: events,
}
]
}
Do you have any suggestions to add info on the day event?
Thanks a lot!

Chartjs 2 - Stacked bar with marker on top

I´m trying to build a stacked bar chart with a marker on top.
how it should look like
.
So I tried to build a bar chart and combine it with a line chart, but that doesn´t work well.
my result so far
.
Is there a way to get a similar result ?
var chartData = {
labels: ["Zukauf", "Produktion"],
datasets: [
{
label: "offene TP",
data: [102, 55],
backgroundColor: "rgba(15,173,25,1)",
hoverBackgroundColor: "rgba(15,173,25,1)"
},{
label: "erledigte TP",
data: [256, 55],
backgroundColor: "rgba(220,111,18,1)",
hoverBackgroundColor: "rgba(220,111,18,1)"
},{
type: "line",
label: "Plan",
data: [425],
backgroundColor: "rgba(255,255,255,0)",
borderColor: "rgba(0,0,0,0.4)",
borderWidth: 2,
hoverBackgroundColor: "rgba(12,128,133,1)"
}
]
};

After few confusing researches in the chartjs documentation I found the perfect solution.
solution picture
var chartData = {
labels: ["Zukauf", "Produktion"],
datasets: [
{
label: "offene TP",
data: [102, 55],
backgroundColor: "rgba(220,111,18,1)",
hoverBackgroundColor: "rgba(220,111,18,1)"
},{
label: "erledigte TP",
data: [256, 55],
backgroundColor: "rgba(15,173,25,1)",
hoverBackgroundColor: "rgba(15,173,25,1)"
},{
label: "Plan",
data: [425, 500],
borderColor: "rgba(0,0,0,1)",
//important settings
//set the width of the line ( or point )
pointRadius: 50,
// don´t show line betrween points
showLine: false,
//change points of line chart to line style ( little bit confusin why it´s named point anyway )
pointStyle: 'line',
//chart type
type: "line",
}
]
};
Only need to change the 'pointStyle' to 'line', the 'pointRadius' for the width of the line and disable 'showLine'.