chart.js first bar is not showing - chart.js

My first bar is not showing.
My html:
<div class="card-body">
<canvas id="canvasContratsIBS"></canvas>
</div>
My js:
var barContratsIBS = {
labels: ['Marché A', 'Marché B', 'Marché C'],
datasets: [{
label: 'Les études d’exécution',
backgroundColor: '#660066',
data: [3, 10, 8],
}, {
label: 'Les études de fabrication, l’approvisionnement et la fabrication',
backgroundColor: '#660066',
data: [3, 10, 8],
}, {
label: 'La livraison et le montage sur site',
backgroundColor: '#660066',
data: [3, 10, 8],
}]
};
Result:


To solve it, I scale the y axis to min value 0:
<script>
var barContratsIBS = {
labels: ['Marché A', 'Marché B', 'Marché C'],
datasets: [{
label: 'Les études d’exécution',
backgroundColor: '#660066',
data: [7, 10, 8]
}, {
label: 'Les études de fabrication, l’approvisionnement et la fabrication',
backgroundColor: '#660066',
data: [5, 10, 8]
}, {
label: 'La livraison et le montage sur site',
backgroundColor: '#660066',
data: [6, 10, 8]
}]
};
var _options = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0
}
}]
}
};
var ctxContratsIBS = document.getElementById("canvasContratsIBS");
var myBarChart = new Chart(ctxContratsIBS, {
type: 'bar',
data: barContratsIBS,
options: _options
});

Related

break y axis in line chart chart.js

I am trying to render a line graph with two datasets
My sample chart
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
fill: false,
data: [9000, 9020, 9010, 9004, 9011, 9040, 9050]
},
{
label: 'My Second dataset',
borderColor: 'rgb(0, 99, 132)',
fill: false,
data: [1000, 1020, 1010, 1004, 1011, 1040, 1050]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
}
});
</script>
This is how it looks currently current result
This the graph will be easy to read if it has axis break like this
expected result

There is no build in way to do this. The best thing you can do is use a second Y axes and link the second dataset to the other axes.
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
yAxisID: 'first'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
yAxisID: 'second'
}
]
options: {
scales: {
yAxes: [{
id: 'first'
},{
id: 'second'
}]
}
}

How scale sector in doughnut chartjs on hover?

How scale sector in doughnut chartjs on hover?
Example:

The simplest solution would be to define different borderWidth and hoverBorderWidth on your dataset as follows.
new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
labels: ['red', 'green', 'gray', 'blue'],
datasets: [{
label: 'My First dataset',
backgroundColor: ['red', 'green', 'gray', 'blue'],
borderColor: 'white',
data: [3, 4, 5, 3],
borderWidth: 4,
hoverBorderWidth: 0,
borderAlign: 'center'
}]
},
options: {
responsive:true,
cutoutPercentage: 65
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

How do I horizontally center a line chart when their is a single X-Axis value?

How can I center the X-axis of a Chart.js (v2.8.0) line chart when there is only one X-axis value?
<span style="width:50%; display:inline-block;">
<canvas id="myChart"></canvas>
</span>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan'],
datasets: [
{ borderColor: 'green', data: [5], label: 'SET1' },
{ borderColor: 'red', data: [7], label: 'SET2' },
{ borderColor: 'blue', data: [3], label: 'SET3' }
]
}
});
</script>

See Chartjs linechart with only one point - how to center
You can add dummy labels to center your single point:
{
type: 'line',
data: {
labels: ['', 'Jan', ''],
datasets: [
{ borderColor: 'green', data: [null, 5, null], label: 'SET1' },
{ borderColor: 'red', data: [null, 7, null], label: 'SET2' },
{ borderColor: 'blue', data: [null, 3, null], label: 'SET3' }
]
}
}
Or you can use the scatter chart type to manually specify the x coordinate of your points.

Chart.js 2 line charts with separate dataset labels

I need build 2 lines charts with different sets of labels
here is example https://jsfiddle.net/o5dtzwn1/
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [1, 2, 3, 4, 5],
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
labels: [
'a',
'b',
'c'
],
}, ]
},
options: {
responsive: true,
legend: {
display: false,
},
}
});
How can I do this?

Ok, that could help you, Now I have made different line chart with four different data with different counts.
Here i have made three label array and attached to tick callback function randomly.
You can choose whichever apropriate, but make sure bigger atrray lenth should come
in to data: { labels: label1}.
Check link enter link description here
var ctx = document.getElementById("myChart");
var label1 = ["aa", "bb", "cc", "dd", "ee", "ff", "gg"];
var label2 = ["1900", "1950", "1999", "2050"];
var label3 = ["AA", "BB", "CC", "DD", "EE"];
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: label1,
datasets: [{
label: "Europe",
type: "line",
borderColor: "#8e5ea2",
data: [408, 547, 675, 934],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "magenta",
data: [133, 221, 783, 2478, 1900, 1200],
fill: false
}, {
label: "Europe",
type: "line",
borderColor: "green",
data: [408, 547, 675, 734, 200],
fill: false
}, {
label: "Africa",
type: "line",
borderColor: "red",
//backgroundColorHover: "#3e95cd",
data: [133, 221, 783, 2478],
fill: false
}]
},
options: {
title: {
display: true,
text: 'Population growth (millions): Europe & Africa'
},
legend: {
display: false
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
if (label3[index] === undefined) {
label3[index] = "no data ";
}
if (label2[index] === undefined) {
label2[index] = "no data ";
}
return "l3 " + label3[index] + "l2 " + label2[index] + ' $' + value;
}
}
}]
}
}
});

//use following code that might helpful
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});

I think this one as you mention have different label and differnt data and count
// here is link https://codepen.io/hiren65/pen/ydMZaJ
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [1, 2, 6, 11, 5],
type: "line",
borderColor: "red",
labels: [
'green',
'yellow',
'red',
'purple',
'blue',
]
}, {
data: [6, 7, 8],
type: "line",
borderColor: "#123ea2",
labels: [
'a',
'b',
'c'
],
}, {
data: [6, 3, 8,10,11,4],
type: "line",
borderColor: "#6cc",
labels: [
'a1',
'b1',
'c1',
'e1'
],
},]
},
options: {
responsive: true,
legend: {
display: true,
},
}
});

How can I datalabels and Sum display in the same time on a stacked bar

I try to have in the same time datalabels and the sum display in my stacked bar chart.
I use chartjs-plugin-datalabels.js to display datalabels or sum.
Above just with datalabels:
Above just with sum :
I would like to have both in the same chart.
I use the follow tricks to sum display :
<script>
const totalizer = {
id: 'totalizer',
beforeUpdate: chart => {
let totals = {}
let utmost = 0
chart.data.datasets.forEach((dataset, datasetIndex) => {
if (chart.isDatasetVisible(datasetIndex)) {
utmost = datasetIndex
dataset.data.forEach((value, index) => {
totals[index] = (totals[index] || 0) + value
})
}
})
chart.$totalizer = {
totals: totals,
utmost: utmost
}
}
}
new Chart('chart', {
type: 'bar',
data: {
labels: ["Note par thème du répondant", "Note par thème sectorielle", "Note par thème générale"],
datasets: [{
label: 'Thème 1',
data: [12, 19, 3],
backgroundColor: 'rgba(255, 206, 86)'
},
{
label: 'Thème 2',
data: [3,8,1],
backgroundColor: 'rgba(54, 162, 235)'
},
{
label: 'Thème 3',
data: [ 5, 2, 3],
backgroundColor: 'rgba(255, 255, 132)'
},{
label: 'Thème 4',
data: [ 5, 2, 3],
backgroundColor: 'rgba(255, 99, 255)'
},{
label: 'Thème 5',
data: [ 5, 2, 3],
backgroundColor: 'rgba(100, 250, 132)'
},{
label: 'Thème 6',
data: [ 5, 2, 3],
backgroundColor: 'rgba(89, 99, 132)'
},{
label: 'Thème 7',
data: [ 5, 2, 3],
backgroundColor: 'rgba(255, 0, 132)'
},{
label: 'Thème 8',
data: [ 5, 2, 3],
backgroundColor: 'rgba(0, 150, 255)'
},{
label: 'Thème 9',
data: [ 5, 2, 3],
backgroundColor: 'rgba(100, 100, 100)'
},{
label: 'Thème 10',
data: [ 10, 4, 7],
backgroundColor: 'rgba(255, 255, 0)'
}]
},
options: {
title :{
display :true,
text : "Mon titre"
},
scales: {
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
suggestedMax: 100
}
}],
xAxes: [{
stacked: true
}]
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
const total = ctx.chart.$totalizer.totals[ctx.dataIndex]
return total.toLocaleString('fr-FR', {})
},
align: 'end',
anchor: 'end',
display: function(ctx) {
return ctx.datasetIndex === ctx.chart.$totalizer.utmost
}
}
}
},
plugins: [totalizer]
});
</script>
I would appreciate any help. Thanks!

OK, I found a way to show Sum and datalabels in the same time.
I add new dataset to represent "Total data" with a backgroundColor transparent and I add this following code in my dataset Total:
datalabels: {
backgroundColor: function (context) {
return 'rgba(244,50,49)';
},
formatter: (value, ctx) => {
const total = ctx.chart.$totalizer.totals[ctx.dataIndex];
return total.toLocaleString('fr-FR', {})
},
align: 'end',
anchor: 'end',
display: function (ctx) {
return ctx.datasetIndex === ctx.chart.$totalizer.utmost
}
Full code bellow :
<script>
const totalizer = {
id: 'totalizer',
beforeUpdate: chart => {
let totals = {}
let utmost = 0
chart.data.datasets.forEach((dataset, datasetIndex) => {
if (chart.isDatasetVisible(datasetIndex)) {
utmost = datasetIndex
dataset.data.forEach((value, index) => {
totals[index] = (totals[index] || 0) + value
})
}
})
chart.$totalizer = {
totals: totals,
utmost: utmost
}
}
}
new Chart('chart', {
type: 'bar',
data: {
labels: ["Note par thème du répondant", "Note par thème sectorielle", "Note par thème générale"],
datasets: [{
label: 'Thème 1',
data: [10, 10, 10],
backgroundColor: 'rgba(68,114,196,0.6)'
}, {
label: 'Thème 2',
data: [13, 8, 11],
backgroundColor: 'rgba(237,125,49,0.6)'
}, {
label: 'Thème 3',
data: [5, 12, 13],
backgroundColor: 'rgba(165,165,165,0.6)'
}, {
label: 'Thème 4',
data: [9, 12, 13],
backgroundColor: 'rgba(255,192,0,0.6)'
}, {
label: 'Thème 5',
data: [5, 12, 9],
backgroundColor: 'rgba(91,155,213,0.6)'
}, {
label: 'Thème 6',
data: [9, 12, 5],
backgroundColor: 'rgba(112,173,71,0.6)'
}, {
label: 'Thème 7',
data: [5, 12, 10],
backgroundColor: 'rgba(38,68,120,0.6)'
}, {
label: 'Thème 8',
data: [15, 12, 10],
backgroundColor: 'rgba(99,99,99,0.6)'
}, {
label: 'Thème 9',
data: [15, 12, 11],
backgroundColor: 'rgba(37,94,145,0.6)'
}, {
label: 'Thème 10',
data: [10, 4, 7],
backgroundColor: 'rgba(24,91,62,0.6)'
}, {
label: 'Total',
data: [0, 0, 0],
backgroundColor: 'rgba(24,91,62,0)',
datalabels: {
backgroundColor: function (context) {
return 'rgba(244,50,49)';
},
formatter: (value, ctx) => {
const total = ctx.chart.$totalizer.totals[ctx.dataIndex];
return total.toLocaleString('fr-FR', {})
},
align: 'end',
anchor: 'end',
display: function (ctx) {
return ctx.datasetIndex === ctx.chart.$totalizer.utmost
}
}
}
]
},
options: {
title: {
text: "Mon titre",
display: true
},
scales: {
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
suggestedMax: 100
}
}
],
xAxes: [{
stacked: true
}
]
},
plugins: {
datalabels: {
color: 'rgba(255,255,255)',
display: function (context) {
return context.chart.isDatasetVisible(context.datasetIndex);
},
backgroundColor: function (context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
font: {
weight: 'bold'
}
}
}
},
plugins: [totalizer]
});
</script>

Great! I just simplified solution without totilizer:
datasets: {
label: 'Total',
data: [120, 120, 120, 120, 120, 120, 120, 120, 120, 120],
backgroundColor: 'rgba(24,91,62,0)',
datalabels: {
backgroundColor: () => 'white',
formatter: (value, ctx) => {
let total = 0;
let index = ctx.dataIndex;
data.datasets.map((d, i) => {
if (i === 2) return;
total += d.data[index];
});
return total;
},
align: 'end',
anchor: 'end',
padding: 0,
},
},