Is there a way in chartjs to have a bar span across the zero line? As an example,
lets say I have a bar with
data:[x:1, y:100]
How do I tell it to span the y-axis from -100 to 100 (instead of from 0 to 100)?
I have sort of a playground here where I can do either negative or positive per bar, but not both for one bar.
https://jsbin.com/dufonoceja/1/edit?js,output
This can be done since Chart.js v2.9.0, which now supports floating bars. Individual bars can now be specified with the syntax [min, max].
<html>
<head>
<title>Floating Bars</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" height="120"></canvas>
</div>
<script>
var chartData = {
labels: [1,2,3,4,5,6],
datasets: [{
type: 'bar',
label: 'Red Bar',
borderColor: 'black',
borderWidth: 1,
backgroundColor: 'rgba(128,0,0,0.2)',
data: [[0, 100], [-100, 100], [-30, 40], 0, 0, 0],
}, {
type: 'bar',
label: 'Green Bar',
backgroundColor: 'rgba(0,128,0,0.2)',
borderColor: 'black',
borderWidth: 1,
data: [0, 0, 0, 0, [-50, 70], 100],
}
]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scaleBeginAtZero: false,
responsive: true,
spanGaps: true,
tooltips: {
mode: 'index',
intersect: true
},
scales: {
xAxes: [{
gridLines: {
display: false
},
}],
yAxes: [{
type: 'linear',
ticks: {
beginAtZero: false,
min:-100,
max:100,
stepSize:30
}
}],
}
}
});
};
</script>
</body>
</html>
Related
how to show those straight Lines.
I added x: { offset: true }, but the next point not looks straight..
My Code
const labels = ["A", "B", "C", "D"];
const data = {
labels: labels,
borderColor: "",
datasets: [
{
label: "Title",
data: [0, 50, 50, -10],
fill: false,
borderWidth: 5,
borderColor: "yellow",
tension: 0.1,
},
],
};
You could use a scatter as following:
const myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{x:0, y:0}, {x:0, y:10}, {x:2, y:10}, {x:2, y:0}],
}]
},
options: {
showLine: true
}
});
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
data: [{x:0, y:0}, {x:0, y:10}, {x:2, y:10}, {x:2, y:0}],
}]
},
options: {
showLine: true,
scales: {
y: {
max: 20
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.1.1/dist/chart.umd.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
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>
I try to add some vertical red lines into my time line chart.
For normal charts with categories is works but not for time axis.
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"/>
</div>
<script>
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [
{
label: "line1",
data: [
{x: "2015-03-15T13:03:00Z", y: 3000},
{x: "2015-03-16T13:03:00Z", y: 3100},
{x: "2015-03-17T13:03:00Z", y: 2900},
{x: "2015-03-18T13:03:00Z", y: 3050}
],
fill: false,
borderColor: 'black'
},
{
label: "line2",
data: [
{x: "2015-03-15T13:03:00Z", y: 4000},
{x: "2015-03-16T13:03:00Z", y: 4100},
{x: "2015-03-17T13:03:00Z", y: 4900},
{x: "2015-03-18T13:03:00Z", y: 4050}
],
fill: false,
borderColor: 'green'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2015-03-17T13:03:00Z',
borderColor: 'red',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: "somelabel"
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
It works, you only forgot to include the script tag to the plugin so the annotations plugin never got loaded in
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [{
label: "line1",
data: [{
x: "2015-03-15T13:03:00Z",
y: 3000
},
{
x: "2015-03-16T13:03:00Z",
y: 3100
},
{
x: "2015-03-17T13:03:00Z",
y: 2900
},
{
x: "2015-03-18T13:03:00Z",
y: 3050
}
],
fill: false,
borderColor: 'black'
},
{
label: "line2",
data: [{
x: "2015-03-15T13:03:00Z",
y: 4000
},
{
x: "2015-03-16T13:03:00Z",
y: 4100
},
{
x: "2015-03-17T13:03:00Z",
y: 4900
},
{
x: "2015-03-18T13:03:00Z",
y: 4050
}
],
fill: false,
borderColor: 'green'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2015-03-17T13:03:00Z',
borderColor: 'red',
borderWidth: 1,
label: {
enabled: true,
position: "top",
content: "somelabel"
}
}]
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js" crossorigin="anonymous"></script>
<div style="width:75%;">
<canvas id="canvas" />
</div>
A simple stacked bar graph
<head>
<title>Stacked Bar Chart</title>
<script src="Chart.bundle.js"></script>
<script src="utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
chartColors = {
redborder: 'rgba(206, 0, 23, 1)',
darkredborder: 'rgba(206, 0, 23, 0.75)',
lightredborder: 'rgba(206, 0, 23, 0.5)',
};
var barChartData = {
labels: [1<img src='images/badges/Manchester United.png' alt='Manchester United.png' height='30' width='30'>,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32],
datasets: [{
label: 'Goals',
backgroundColor: window.chartColors.redborder,
data: [0,1,3,0,2,0,0,2,0,1,0,1,1,0,0,1,0,0,2,1,0,1,2,1,1,0,0,0,2,2,0,3]
}, {
label: 'Assists',
backgroundColor: window.chartColors.darkredborder,
data: [0,0,1,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,1]
}, {
label: 'Indirect',
backgroundColor: window.chartColors.lightredborder,
data: [0,0,1,0,0,0,0,0,1,1,0,1,0,0,1,0,0,0,1,1,0,1,2,0,0,0,1,0,0,0,0,1]
}]
};
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
}]
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myBar.update();
});
</script>
</body>
</html>
in the x-axis labels, I am trying to get a small icon (image) to be displayed instead of a number. I have tried to put just the image tag in all possible combinations of " and ' as well as with the number. But to no avail. The chart does not render. It seems that the label needs to recognized as a value to render and the html tag knocks this out of place. I don't see why an image tag cannot be put in there, is there a way to do this?