Related
I have chartjs v2.9.3 in my Django app and it works great. Now I need to add a box to one of my charts using chartjs-plugin-annotation, and I've followed all the steps, but I can't get it to work.
I've used chartjs-plugin-annotation v0.5.7 which is for v2.9.3. I get no errors in the console log.
First, scripts with chart.js and plugins:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#0.5.7/chartjs-plugin-annotation.min.js"></script>
My code for chart (chart works, I just can't get box to appear):
<canvas id="myChart" height="250"></canvas>
<script>
function setChart12(){
$('#myChart').remove();
$('#container_glavni').append('<canvas id="myChart" height="200"></canvas>');
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: date,
datasets: [{
label: 'Number of reports',
data: data_nc
}, {
type: 'line',
label: 'Median',
data: [50],
fill: false,
borderColor: 'rgb(54, 162, 235)',
}],
},
options: {
layout: {
padding: {
top: 30
}
},
responsive: true,
legend: {
display: false
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
offset: 5,
},
autocolors: false,
annotation: {
annotations: {
box1: {
type: 'box',
xMin: 0,
xMax: 1,
yMin: 0,
yMax: 30,
backgroundColor: 'rgba(255, 99, 132, 0.25)'}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});}
</script>
I've tried:
Different values for min and max
Different colors
Different code formating
This is because you putted the options in the place where they belong in V1 of the annotation plugin and the syntax too. For V0.5.7 the annotation options have to be placed in the root of the options and also all the annotations are an array instead of seperate objects:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
annotation: {
annotations: [{
id: "hline",
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: 10,
borderColor: "red",
}]
},
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation#0.5.7/chartjs-plugin-annotation.min.js"></script>
</body>
Hello i am rendering these charts using chart js but i am unable to align these charts in the same order my config file and options file is given below
can anyone please help me with this. i tried with below options and data
const options = {
indexAxis: "y",
maintainAspectRatio: false,
aspectRatio: 0.8,
barThickness: 20,
responsive: true,
layout: {
padding: {
left: 1
}
},
plugins: {
legend: {
display: false
}
},
scales: {
x: {
ticks: {
color: "#495057"
},
grid: {
color: "#ebedef"
}
},
y: {
ticks: {
color: "#495057",
crossAlign: "near"
},
grid: {
color: "#ebedef"
},
gridLines: {
offsetGridLines: true,
display: true
}
}
}
};
const data = {
labels: ["red"],
datasets: [{
backgroundColor: "#42A5F5",
data: [65],
borderWidth: 2,
borderRadius: 75,
borderSkipped: false
},
{
backgroundColor: "#FFA726",
data: [28],
borderWidth: 2,
borderRadius: 50,
borderSkipped: false
}
]
};
how to align one below the other labels
As far as I know chart.js does not provide an option to set a minimum distance for the labels, a workaround to achieve this is to add spaces the the labels of the charts where the labels are shorter as the longest one so you will get something like this:
var options = {
type: 'bar',
data: {
labels: [" Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y'
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
var options = {
type: 'bar',
data: {
labels: [" Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y'
}
}
var options2 = {
type: 'bar',
data: {
labels: [" Yellowwwww"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y'
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var ctx2 = document.getElementById('chartJSContainer2').getContext('2d');
new Chart(ctx2, options2);
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="chartJSContainer2" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
My code is
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2015-01", "2015-02"],
datasets: [{
label: '# of Tomatoes',
data: [12, 19],
borderWidth: 1
}, {
label: '# of Oranges',
data: [10, 19],
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
First bar his result is 12 + 10 = 22, but ¿How can I do that result be 2 instead of 22? I would like to minus 12-10, not sum 12+10
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,
},
}
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<script>
<!--bar stacked-->
var data2 = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [
{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32,41,21,78,0,0,0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,80,12,70,65,44,18]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915,400,233,398,334,766,1071]
},
]}
,
{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [
{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55,22,40,2,0,0,0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,2,100,0,17,55,74]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232,555,800,900,723,1001,942]
},
]
},
]
};
data2.CC.forEach( function(i, item){
document.body.innerHTML += '<canvas id="'+i.code+'"></canvas>'
var ctx2 = document.getElementById(i.kodu).getContext('2d');
window.myBar = new Chart(ctx2, {
type: 'bar',
data: data2.AA[0],
options: {
title: {
display: true,
text: i.code
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
});
</script>
</body>
</html>
when I run I get this error: Uncaught TypeError: Cannot read property 'currentStyle' of null and my first chart can't load
I try Uncaught TypeError: Cannot read property 'currentStyle' of null in ChartJS but my first chart again dont load
Is there anyone help?
You had a couple of issues:
Chart reference was being overridden by the last chart in the collection
A few references to variables did not exist from your original source dump
Chart data source reference needed to be changed
document.addEventListener('DOMContentLoaded', function(){
var chartData = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32,41,21,78,0,0,0]
},{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,80,12,70,65,44,18]
},{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915,400,233,398,334,766,1071]
}]
},{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55,22,40,2,0,0,0]
},{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10,2,100,0,17,55,74]
},{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232,555,800,900,723,1001,942]
}]
}]
};
chartData.CC.forEach(function(data, index){
var canvas = document.createElement('canvas'),
chartId = 'chart' + data.code;
canvas.id = chartId;
document.body.appendChild(canvas);
var context = document.getElementById(chartId).getContext('2d');
window[chartId] = new Chart(context, {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: data.code
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
});
});
Stack snippet is throwing a script error because of chart.js so I created a Codepen
You charts are not being loaded because your code should be item instead of data2.AA[0]. Also, you do not have any property with name kodu in your data object. Check out working version below:
var data2 = {
CC: [{
code: '123ASD',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [32, 41, 21, 78, 0, 0, 0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10, 80, 12, 70, 65, 44, 18]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [915, 400, 233, 398, 334, 766, 1071]
},
]
},
{
code: 'ASD123',
labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
datasets: [{
label: 'AAA',
backgroundColor: "rgba(255,0,0,1)",
data: [55, 22, 40, 2, 0, 0, 0]
},
{
label: 'BBB',
backgroundColor: "rgba(0,255,0,1)",
data: [10, 2, 100, 0, 17, 55, 74]
},
{
label: 'CCC',
backgroundColor: "rgba(0,0,205,1)",
data: [232, 555, 800, 900, 723, 1001, 942]
},
]
},
]
};
data2.CC.forEach(function(item, arr) {
var chartId = item.code;
var canvas = document.createElement("Canvas");
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: item,
options: {
title: {
display: true,
text: chartId
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
document.body.appendChild(canvas);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>