I am trying to fill the area between two lines in a line chart using Chart.js. Like this:
There is already an answer here, that explains how to extend chartjs to do this.
But I know this feature is now native in V2 (from this thread on the github issues page), the problem is I just can't find documentation referring to this.
Is there a section about this in the doc? Anyone know how to use this feature?
Thanks!
Make sure you import the 2.6.0 version:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
Then follow the rules as described here: http://www.chartjs.org/docs/latest/charts/area.html
Below is an example, and how it looks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My two lines with colour between them</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
</head>
<body>
<canvas id="mychart" width="300" height="200"></canvas>
<script>
var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas)
var config = { //configure the chart
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: "Min",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: false, //no fill here
data: [5, 5, 3, 2]
},
{
label: "Max",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
borderColor: 'rgba(55, 173, 221, 1.0)',
fill: '-1', //fill until previous dataset
data: [8, 7, 6, 5]
}]
},
options: {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
}
};
var chart = new Chart(ctx, config);
</script>
</body>
</html>
Setting fill property to +1 of a dataset will set the backgroundColor from this line to the next line in dataset.
datasets: [{
label: 'Systolic Guideline',
data: [],
fill: '+1',
borderColor: '#FFC108',
backgroundColor: 'rgba(255,193,8,0.2)'
},
{
label: 'Diastolic Guideline',
data: [],
fill: true,
borderColor: '#FFC108',
backgroundColor: 'rgba(0,0,0,0)'
}]
See this: https://www.chartjs.org/samples/latest/charts/area/line-datasets.html
Here is a small plugin that can do shading between any two dataset lines.
https://stackoverflow.com/a/41733045/852977
Related
I am using Chart.js and try to make line chart.
I want to make my chart legend label (Tom and Jim) font size more bigger.
I tried like this;
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Chart</title>
</head>
<body>
<canvas id="my_chart">
Canvas not supported...
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
(function() {
'use strict';
var type = 'line';
var data = {
labels: [2019, 2020, 2021, 2022],
datasets: [{
label: 'Tom',
data: [120, 350, 250, 210],
borderColor: 'red',
borderWidth: 5,
fill: false,
lineTension: 0,
pointStyle: 'rect'
}, {
label: 'Jim',
data: [180, 200, 300, 500],
borderColor: 'blue',
borderWidth: 5,
fill: false,
backgroundColor: 'rgba(0, 0, 255, 0.3)',
lineTension: 0,
pointStyle: 'triangle'
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 400
}
}]
},
legend: {
position: 'right',
fontSize: 100,
}
};
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
type: type,
data: data,
options: options
});
})();
</script>
</body>
</html>
But It doesn't work. What should I do?
Cf. Chart.js Radar chart legend label font size doesn't work
labels is needed!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Chart</title>
</head>
<body>
<canvas id="my_chart">
Canvas not supported...
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
(function() {
'use strict';
var type = 'line';
var data = {
labels: [2019, 2020, 2021, 2022],
datasets: [{
label: 'Tom',
data: [120, 350, 250, 210],
borderColor: 'red',
borderWidth: 5,
fill: false,
lineTension: 0,
pointStyle: 'rect'
}, {
label: 'Jim',
data: [180, 200, 300, 500],
borderColor: 'blue',
borderWidth: 5,
fill: false,
backgroundColor: 'rgba(0, 0, 255, 0.3)',
lineTension: 0,
pointStyle: 'triangle'
}]
};
var options = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax: 400
}
}]
},
legend: {
position: 'right',
labels: {
fontSize: 100,
}
}
};
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
type: type,
data: data,
options: options
});
})();
</script>
</body>
</html>
I'm using ChartJS 2.8.0 and I have the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<div class="reportGraph">
<canvas id="chartJSContainer"></canvas>
</div>
<script>
const labels = ["stable","happy","composed","certainty","active","aggressive",["responsible","causativ"],["correct","estimation"],"appreciative",["communication","level"]];
const labels2 = [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"];
const data = {
labels: labels,
datasets: [
{
label: "",
data: [-92, -100, -99, -86, 8, 56, -94, -89, -92, -24],
borderColor: "black",
backgroundColor: "transparent",
type: "line",
borderWidth: 2,
order: 0,
lineTension: 0,
fill: false
},
{
label: "Urgently needs attention",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: "rgb(221, 221, 221)",
backgroundColor: "rgb(221, 221, 221)",
order: 2
},
{
label: "Requires attention",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: "rgb(136, 136, 136)",
backgroundColor: "rgb(136, 136, 136)",
order: 1
},
{
label: "Acceptable under perfect condition",
data: [0, 0, 0, 0, 0, , 0, 0, 0, 0],
borderColor: "rgb(228, 185, 192)",
backgroundColor: "rgb(228, 185, 192)",
order: 3,
type: "bar"
}
]
};
const config = {
type: "bar",
data: data,
options: {
responsive: true,
legend: {
display: true,
position: 'right',
labels: {
fontColor: 'black',
filter: function(item, chart) {
return item.datasetIndex !== 0;
}
}
},
},
scales: {
y: {
ticks: {
suggestedMin: -100,
suggestedMax: 100
}
},
x: {
position: "bottom",
grid: {
offset: true
}
},
x2: {
position: "top",
grid: {
offset: true
},
labels: labels2
}
}
};
var chart = new Chart(document.getElementById("chartJSContainer"), config);
</script>
</body>
</html>
I am unable to have the Y axis to start from -100 to 100 even though I added a code for it.
Also, I want to have the same X-axis labels displayed on the top of the graph too. Any help on the issues I have on this code please? Thanks.
Note: Please do not change the library version 2.8.0 when you suggest a code.
You are using V3 syntax for the scales, version 2 used a different syntax, please look at this link for the documentation for the version you are using
Live example with scale min-max:
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: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 100
}
}],
xAxes: [{offset: true},
{
position: 'top',
offset: true,
labels: [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"]
}]
}
}
}
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.8.0/Chart.js"></script>
</body>
I tried creating float charts with chartjs but it does not seem to work. I tried copying the same example as they have http://pravopys.net/chartjs/samples/charts/bar/vertical.html but mine does not render at all or throw any errors.
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ['January', 'February', 'March'],
datasets: [
{
label: "Population (millions)",
data: [
[-2, 5],
[-20, 70],
[30, 80]
],
backgroundColor: "rgba(75, 192, 192, 0.2)",
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
fill: false,
lineTension: 0,
type: "bar"
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
Not sure what I'm doing wrong here. The example shows the data structure for the dataset being used exactly how I'm using it.
Any help is greatly appreciated.
Plunker link: http://www.plnkr.co/edit/bD1MgVvjuq7B4RM5Qcmh?p=preview
You need a 2d context to draw the chart on. Here's a working example:
Do these 2 changes in your code:
HTML
<canvas id="bar-chart" width="400" height="400"></canvas>
Javascript
var ctx = document.getElementById("bar-chart").getContext("2d");
var myBarChart = new Chart(ctx, ...)
Source: https://www.chartjs.org/docs/latest/#creating-a-chart
I'm trying to display data in a bar chart using chart.js. I'm using multiple datasets so I can show the data id as the lable of the dataset. I have only one datapoint in each dataset and the x-axis displays the time. I want to display 15 datasets. The problem is, when displaying more than one datasets some bars get out of bound. How it looks and how I want it to look like. I
I tried the barPercentage and the categoryPercentage options without any success.
Here is what I got so far:
<html>
<head>
<script src="node_modules\chart.js\dist\Chart.bundle.js"></script>
<style>
canvas{
height:120px !important;
width:302px !important;
}
</style>
</head>
<body>
<div>
<canvas id= "myChart" width=400 height=400></canvas>
</div>
<script>
<!-- My script for the Chart -->
</script>
</body>
</html>
And the script that handels the chart:
//The array of datasets that I want to display
var datasetarray = [{
label: 'Secounds needed for dummy build',
data: [{x:"19700101T0001",y:20}],
backgroundColor: ['rgba(0, 0, 0, 0.1)'],
borderColor: ['rgba(0, 0, 0, 1)'],
borderWidth: 1
}
, //Some more datasets
,{
label: 'Secounds needed for dummy build',
data: [{x:"19710315T0001",y:20}],
backgroundColor: ['rgba(0, 0, 0, 0.1)'],
borderColor: ['rgba(0, 0, 0, 1)'],
borderWidth: 1
}];
//Creating the Chart
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: datasetarray
},
options: {
maintainAspectRatio: false,
legend: {display: false},
scales: {
xAxes: [{
type:'time',
distribution: 'series',
barPercentage: 0.9,
categoryPercentage: 0.9,
bounds:'data',
offset:false,
ticks:{source: 'labels'}
}],
yAxes: [{
ticks: {
suggestedMax: 100
,suggestedMin: 20
,beginAtZero: true
}
}]
}
}
});
EDIT: Here's a jsfiddle that may help you helping me. Thanks in advance :)
I'm trying to create a graphic in my .html file in the altervista ftp.
Here's my code:
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" />
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
...
],
borderColor: [
'rgba(255,99,132,1)',
...
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Why I'm getting nothing in canvas?
Also the console does not show errors.
You should remove the ... under backgroundColor and borderColor or add colors according to the number of labels.
You need to call myChart.update() after initializing the chart.
I solved my error editing the first script from this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" />
to this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js" ></script>
as suggested by #j.ian.le
And adding
responsive: false,
under options: {