How to make a max value in doughnut chart - chart.js

I am using reactJs and chartjs.
I have the following chart I would like to make :
I have the following code
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['OK'],
datasets: [{
label: '# of Tomatoes',
data: [12],
backgroundColor: [
'#0EA4EA',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
cutoutPercentage: 80,
rotation: 0.75 * Math.PI,
circumference: 1.5 * Math.PI,
title: {
display: true,
position: 'bottom',
},
scale: {
ticks: {
min: 0,
max: 150
}
}
}
});
But I can't find a way to set the max value of the arc to 150
here

I think you need to specify the area that isn't in Blue:
labels: ['Ok', 'Not Ok'],
datasets: [{
label: '# of Tomatoes',
data: [12, 138],
backgroundColor: [
'#0EA4EA',
],
borderWidth: 1
}]

Related

ChartJS : How to display two "y axis" scales on a chart

I have a chart that shows various data points.
Some of these data points are high numbers and some are low numbers.
The low numbers (visits) I can scale to a different scale and this new scale can be put on the "X" axis (It's the "Y" axis and then rotated 90degrees). But the problem is:
The grid remains even when removed
The
How can I extrapolate the poistion on the graph without adjusting the label data on hover?2 I have search Stackoverflow and ChartJS documentation but can't see how this can be done.
I was trying to use the "other" axis (in this case the top horizontal bar of the chart) so that the scale would be relative and raw data editing would not be needed but I can't get that to work and can't find documentation on this. I'm sure it's possible but I can't see how where.
I have found this question but this related only to ChartJS V2 .
Current version used is ChartJS 3.2.1
Original Version:
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022,2021,2020,2019,2018,2017,2016],
datasets: [
{
type: 'line',
label: 'Visits',
data: ["1","7","493","163","467","88","48"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10
},
{
type: 'bar',
label: 'Applied',
data: ["486","800","704","1084","532","618","543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1","147","290","521","233","306","271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616","4273","3998","3400","922","1225","1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545', /* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6","13","22","1","34","2","1"],
backgroundColor: '#65ccD3', /* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1
},
beginAtZero: true
}],
yAxes: [{
stacked: true
}]
}
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>
UPDATE:
I have tried to add a custom secondary axis as per this example from the CHartJS documentation, but it doesn't quite do as I need; the grid lines remain and the axis scale is on the "wrong" side (two scales on one size (bottom) and zero scales on the other side (top)
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022,2021,2020,2019,2018,2017,2016],
datasets: [
{
type: 'line',
label: 'Visits',
data: ["1","7","493","163","467","88","48"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10,
xAxisID:'xTwo'
},
{
type: 'bar',
label: 'Applied',
data: ["486","900","724","1084","532","618","543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1","147","290","511","253","306","271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616","4373","3998","3400","922","1205","1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545', /* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6","23","22","1","4","2","1"],
backgroundColor: '#65ccD3', /* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1
},
beginAtZero: true
}],
yAxes: [{
stacked: true
}],
xTwo: [{
type: 'linear',
display: true,
position: 'top',
grid: {
display: false,
drawOnChartArea: false,
ticks: {
display: false
}
}
}]
}
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>
The issue appears to be with the scale; "xTwo";
xTwo: [{
type: 'linear',
display: true,
position: 'top',
grid: {
display: false,
drawOnChartArea: false,
ticks: {
/* trying to even just hide the ticks here fails */
display: false,
}
}
}]
How can I fix this to hide the grid lines and put the scale on the correct side of the graph?
You can use a custom label callback for this in the tooltip config, also your scale config was wrong. It was in V2 style. For all changes please read the migration guide
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
datasets: [{
type: 'line',
label: 'Visits',
data: ["5", "35", "2465", "815", "2335", "440", "240"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10
},
{
type: 'bar',
label: 'Applied',
data: ["486", "800", "704", "1084", "532", "618", "543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1", "147", "290", "521", "233", "306", "271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616", "4273", "3998", "3400", "922", "1225", "1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545',
/* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6", "13", "22", "1", "34", "2", "1"],
backgroundColor: '#65ccD3',
/* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => {
const label = ttItem.dataset.label;
const val = Number(ttItem.raw);
let res = `${label}: ${label === 'Visits' ? val / 5 : val}`;
return res
}
}
}
},
scales: {
x: {
stacked: true,
ticks: {
stepSize: 1
},
beginAtZero: true
},
y: {
stacked: true
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>
UPDATE:
You tried adding a second scale, in chart.js V3 all scales are their own objects and not arrays anymore, for all changes see migration guide linked above. Changing the scales to objects fixes your issue in your updated approach without needing to multiply values :
var ctx = document.getElementById("historicChart");
var historicChart = new Chart(ctx, {
type: "horizontalBar",
data: {
labels: [2022, 2021, 2020, 2019, 2018, 2017, 2016],
datasets: [{
type: 'line',
label: 'Visits',
data: ["1", "7", "493", "163", "467", "88", "48"],
backgroundColor: '#FFC900',
pointBackgroundColor: '#FFC900',
pointRadius: 8,
pointStyle: 'circle',
showLine: false,
order: 1,
hoverRadius: 10,
xAxisID: 'xTwo'
},
{
type: 'bar',
label: 'Applied',
data: ["486", "900", "724", "1084", "532", "618", "543"],
backgroundColor: '#436BFF',
borderWidth: 0,
order: 2,
barPercentage: 0.9,
stack: 'stack 0',
},
{
type: 'bar',
label: 'Accepted',
data: ["1", "147", "290", "511", "253", "306", "271"],
backgroundColor: '#C40500',
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 1',
order: 4
},
{
type: 'bar',
label: 'Declined',
data: ["616", "4373", "3998", "3400", "922", "1205", "1184"],
/*backgroundColor: '#03570c', /* emerald */
backgroundColor: '#006545',
/* jade */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 5
},
{
type: 'bar',
label: 'Processing',
data: ["6", "23", "22", "1", "4", "2", "1"],
backgroundColor: '#65ccD3',
/* aqua + blue */
borderWidth: 0,
barPercentage: 0.9,
stack: 'stack 0',
order: 3
},
]
},
options: {
responsive: true,
interaction: {
intersect: false,
mode: 'index',
axis: 'y'
},
indexAxis: 'y',
scales: {
x: {
stacked: true,
ticks: {
stepSize: 1000
},
beginAtZero: true
},
y: {
stacked: true
},
xTwo: {
type: 'linear',
display: true,
position: 'top',
grid: {
display: false,
ticks: {
display: false
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="historicChart"></canvas>

Draw stacked horizontal bar chart with Average line using ChartJS

I am trying to create a stacked horizontal bar chart with an average line on each bar using the ChartJS library. I tried several times and searched on the Internet but I did not find out any satisfying answers. I appreciate your helping. Thanks.
Example:
.
In this example, the red line on each bar implies the average value of its group.
To create the stacked horizontal bar chart, please see
https://jsfiddle.net/lamtn862004/9wm1krqf/10/.
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'groupableHBar',
data: data,
options: {
scales: {
yAxes: [{
stacked: true,
type: 'category',
id: 'y-axis-0'
}],
xAxes: [{
stacked: true,
type: 'linear',
ticks: {
beginAtZero:true
},
gridLines: {
display: false,
drawTicks: true,
},
id: 'x-axis-0'
},
{
stacked: true,
position: 'top',
type: 'linear',
ticks: {
beginAtZero:true
},
id: 'x-axis-1',
gridLines: {
display: true,
drawTicks: true,
},
display: false
}]
}
}
});
Now, I want to add the average line to each bar (as shown in the image).
Also, do you know the other solutions with open-source libraries for doing this?
The lines can be drawn using floating bars tied to the separate axis y2. To do so, you need to add another dataset as follows (I don't exactly understand what values you want to display, hence I randomly chose 40, 65 and 55):
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
Further you must define a new scales option as shown below:
y2: {
display: false
}
Please take a look at your amended runnable code and see how it works.
var data = {
labels: ["January", "February", "March"],
datasets: [{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25]
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65]
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10]
},
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
]
};
new Chart('myChart', {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
y: {
stacked: true,
grid: {
display: false
}
},
y2: {
display: false
},
x: {
stacked: true,
beginAtZero: true,
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

How can I show chartjs datalabels only last bar?

I need to show the last bar value only. like this image:
I try this code but it shows all values.
var dataX = {
labels: [['Personne', 'seule'], ['Couple sans', 'enfant'], ['Couple avec', 'enfant(s)'], ['Famille', 'monoparentale'], 'Autres'],
datasets: [{
label: 'Data 1',
data: [33,28,25,8,2.5],
backgroundColor: '#00BBF1',
borderWidth: 0
},
{
label: 'Data 2',
data: [29,30,30,8,2],
backgroundColor: '#3CC6F4',
borderWidth: 0
},
{
label: 'Data 3',
data: [41,22,22,11,3],
backgroundColor: '#92D9F8',
borderWidth: 0
}]
};
var optionsX = {
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
legend: false,
scales: {
xAxes: [{
gridLines : {
color: "#fff"
},
}],
yAxes: [{
gridLines : {
display : false
},
ticks: {
min: 0,
max: 50,
stepSize: 10,
callback: function(value) {
return value + "%"
},
}
}]
},
plugins: {
datalabels: {
color: '#59595B',
font: {
weight: 'bold',
size: 14,
},
align: 'end',
anchor: 'end',
formatter: function(value, context) {
return value +'%';
}
}
},
};
var ctx = document.getElementById('chart-one');
var myChart = new Chart(ctx, {
type: 'bar',
data: dataX,
options: optionsX
});
You can change the plugins.datalabels.formatter function as follows:
plugins: {
...
datalabels: {
formatter: (value, context) => context.datasetIndex == 2 ? value + '%' : ''
}
}
Please take a look at your amended code below and see how it works.
var dataX = {
labels: [
['Personne', 'seule'],
['Couple sans', 'enfant'],
['Couple avec', 'enfant(s)'],
['Famille', 'monoparentale'], 'Autres'
],
datasets: [{
label: 'Data 1',
data: [33, 28, 25, 8, 2.5],
backgroundColor: '#00BBF1',
borderWidth: 0
},
{
label: 'Data 2',
data: [29, 30, 30, 8, 2],
backgroundColor: '#3CC6F4',
borderWidth: 0
},
{
label: 'Data 3',
data: [41, 22, 22, 11, 3],
backgroundColor: '#92D9F8',
borderWidth: 0
}
]
};
var optionsX = {
tooltips: {
enabled: false
},
responsive: true,
maintainAspectRatio: false,
legend: false,
scales: {
xAxes: [{
gridLines: {
color: "#fff"
},
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
min: 0,
max: 50,
stepSize: 10,
callback: function(value) {
return value + "%"
},
}
}]
},
plugins: {
datalabels: {
color: '#59595B',
font: {
weight: 'bold',
size: 14,
},
align: 'end',
anchor: 'end',
formatter: (value, context) => context.datasetIndex == 2 ? value + '%' : ''
}
},
};
var ctx = document.getElementById('chart-one');
var myChart = new Chart(ctx, {
type: 'bar',
data: dataX,
options: optionsX
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="chart-one"></canvas>

Chart.js label and point getting cutoff on the right

It seems as though the last date label is getting cutoff on my chart here in chart.js. There should be a data point for 2018.
When researching it I've seen it suggested to add layout padding.
I tried that but it disables the chart entirely. Anyone have an alternative solution or an idea on why my layout padding does not work?
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dollar.years,
datasets: [
{label: 'Cdn dollar in cents',
data: dollar.vals,
borderColor: 'rgb(153,222,101)',
backgroundColor: 'rgb(153,222,101, 0.2)',
pointRadius: 0,
borderWidth: 6,
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
labels: {
padding:1
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 5,
stepSize: 1
}
}],
xAxes: [{
type: "time",
time: {
unit: "year",
tooltipFormat: "YYYY"
},
ticks: {
display: true,
labelOffset: -1,
maxTicksLimit: 5,
drawOnChartArea: false,
autoSkip: false,
maxRotation: 0,
minRotation: 0,
padding: 5
},
}],
}
}
});
}
The option layout.padding work as below code snippet illustrates. You however need to carefully choose the values (number of pixels) in order to not completely hide the chart area.
I would however rather define xAxes.ticks.max to make sure the tick for 2018 is shown even if data would be available up to 2017 only.
const years = [];
const vals = [];
for (let year = 1968; year <= 2018; year++) {
years.push(year.toString());
vals.push(Math.floor(Math.random() * 3) + 1);
}
var myChart = new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: years,
datasets: [{
label: 'Cdn dollar in cents',
data: vals,
borderColor: 'rgb(153,222,101)',
backgroundColor: 'rgb(153,222,101, 0.2)',
pointRadius: 0,
borderWidth: 6
}]
},
options: {
responsive: true,
layout: {
padding: {
left: 0,
right: 100,
top: 0,
bottom: 0
}
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 4,
stepSize: 1
}
}],
xAxes: [{
type: "time",
time: {
parser: 'YYYY',
unit: "year",
tooltipFormat: "YYYY"
},
ticks: {
max: "2018",
maxTicksLimit: 5,
maxRotation: 0
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

Chartjs: Why do I have 2 Y Axis labels?

My chart data is working, but I would like the Y axis to start below my lowest value and extend just a bit above the largest value and I was looking at the yAxes-> ticks-> min/max to do this. But when I add this to the options, a second second Y axis label is added with a scale of -1.0 to 1.0; I'm not sure how to get rid of that. I have attached some screen shots and some mocked up js code. Thanks
var chartData = {
labels: ['January', 'February', 'March'],
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: 'blue',
borderWidth: 2,
fill: false,
data: [
85, 80, 75
]
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: 'red',
data: [
90, 85, 80
],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: 'green',
data: [
95, 90, 85
]
}]
};
var ctx = document.getElementById('canvas').getContext('2d');
window.myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
title: {
display: true,
text: 'A Funky Label'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: false
}],
yAxes: [
{
ticks: {
max: 100,
min: 50,
stepSize: 10,
callback: function (value, index, values) {
return value + " HP";
}
}
},
{
stacked: false
}
]
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
}
}
});
}
I discovered the answer:
I was trying to determine if I wanted a stacked bar chart or regular bar chart with multiple series chart. Anyway, after deciding to stick with the regular bar chart with multiple series I removed this from my options section:
stacked: false
Once removed the second Y axis disappeared