I created a radar chart with chart.js, however, I am having issues displaying the real data of my data points. I used the chart.js label plugin but it is displaying the point where the data point has plotted. How would I get it so my real data along with the label be displayed instead of the point where it is plotted. Many thanks!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
</head>
<body>
<center><h3>Apple Values</h3></center>
<canvas id="Apple"></canvas>
<script>
var ctx = document.getElementById('Apple');
var real_data = [
['133', '425', '222', '621', '151'],
];
var data = {
labels: ['X', 'Y','Z','N','A'],
datasets: [{
label: 'Apples',
data: [.41, .5, .33, .72, .64],
backgroundColor: 'rgba(101,81,255,0.2)',
borderColor: 'rgba(101,81,255,0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}]
};
var options = {
tooltips: {
callbacks: {
title: function(t, d) {
let title = d.datasets[t[0].datasetIndex].label;
return title;
},
label: function(t, d) {
let title = d.datasets[t.datasetIndex].label;
let label = d.labels[t.index];
let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
return label + ': ' + value;
}
}
}
};
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
</script>
</body>
</html>
you can either use plugins to change the chart after it is drawn or controllers to change how the chart is drawn since there is no direct way to manipulate rendering of charts. These are the links:
https://www.chartjs.org/docs/latest/developers/plugins.html
https://www.chartjs.org/docs/latest/developers/charts.html#extending-existing-chart-types
For your particular example, here is the code for using plugins, the easier of the two;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
</head>
<body>
<center><h3>Apple Values</h3></center>
<canvas id="Apple"></canvas>
<script>
var ctx = document.getElementById('Apple');
var real_data = [
['133', '425', '222', '621', '151'],
];
var data = {
labels: ['X', 'Y','Z','N','A'],
datasets: [{
label: 'Apples',
data: [.41, .5, .33, .72, .64],
backgroundColor: 'rgba(101,81,255,0.2)',
borderColor: 'rgba(101,81,255,0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}]
};
var options = {
tooltips: {
callbacks: {
title: function(t, d) {
let title = d.datasets[t[0].datasetIndex].label;
return title;
},
label: function(t, d) {
let title = d.datasets[t.datasetIndex].label;
let label = d.labels[t.index];
let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
return label + ': ' + value;
}
}
}
};
var plugins = [{
afterDatasetsDraw: function(chart) {
var real_data = ['133', '425', '222', '621', '151'];
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var datasetMeta = chart.getDatasetMeta(index);
if (datasetMeta.hidden) return;
datasetMeta.data.forEach(function(point, index) {
var value = real_data[index],
x = point.getCenterPoint().x,
y = point.getCenterPoint().y,
radius = point._model.radius,
fontSize = 14,
fontFamily = 'Verdana',
fontColor = 'black',
fontStyle = 'normal';
ctx.save();
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
ctx.fillStyle = fontColor;
ctx.fillText(value, x, y - radius - fontSize);
ctx.restore();
});
});
}
}]
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options,
plugins: plugins
});
</script>
</body>
</html>
Related
I want to create a diagram with Chart.js where the x-Axes is the time.
I want the diagram to show a entire day (from 0 a.m. to 24 p.m.).
Since my data doesn't start at 0 a.m. and doesn't end at 24 p.m. I wanted to set a min and max value for the axes. I tried some varietions but nothing really worked.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="my-chart.js"></script>
</body>
</html>
my-chart.js:
// setup block
const data = {
datasets: [{
label: 'Sales',
data: [
{x: '2021-08-08T13:12:23', y:3},
{x: '2021-08-08T13:12:45', y:5},
{x: '2021-08-08T13:12:46', y:6},
{x: '2021-08-08T13:13:11', y:3},
{x: '2021-08-08T13:14:23', y:9},
{x: '2021-08-08T13:16:45', y:1}
],
borderColor: 'rgba(234,124,234,0.4)',
backgroundColor: 'rgba(34,14,24,0.4)'
}]
};
// config block
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
}
},
y: {
beginAtZero: true
},
xAxes: [{
type: "time",
time: {
min: 1628373600,
max: 1628460000
}
}]
}
}
};
// render / init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
Is there a mistake in my code or why it isn't changing anything?
You are trying to use v2 and v3 config at the same time, this wont work. You need to remove the array format and only use the objects to define scales.
When placing the min and max props at the root of the x object for the x scale it works fine, although the time between the min and max you are using is only 1,5 minute:
// setup block
const data = {
datasets: [{
label: 'Sales',
data: [{
x: '2021-08-08T13:12:23',
y: 3
},
{
x: '2021-08-08T13:12:45',
y: 5
},
{
x: '2021-08-08T13:12:46',
y: 6
},
{
x: '2021-08-08T13:13:11',
y: 3
},
{
x: '2021-08-08T13:14:23',
y: 9
},
{
x: '2021-08-08T13:16:45',
y: 1
}
],
borderColor: 'rgba(234,124,234,0.4)',
backgroundColor: 'rgba(34,14,24,0.4)'
}]
};
// config block
const config = {
type: 'line',
data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'second'
},
min: '2021-08-08T00:00:00',
max: '2021-08-08T23:59:59'
},
y: {
beginAtZero: true
}
}
}
};
// render / init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="my-chart.js"></script>
</body>
</html>
I have this great code working here where I load the data in from an external file called test.csv.
Everything works great until I try to update the chart.js library link.
Can anyone tell me why this code doesn't work with more current versions of chart.js?
I want to update it so that I can install the plugin that lets you show the charts values. Alternatively some code that would facilitate this would work great as well!
Appreciate any help!
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Data project</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART</h1>
<h2>This is the subhead for my chart </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var dollar = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: dollar.years,
datasets: [
{
label: 'Voter support (%)',
data: dollar.vals,
backgroundColor: [
'#134D85',
'#134D85',
'#134D85',
'#134D85',
'#134D85',
],
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15,
}
},
scales: {
yAxes: [{
gridlines: {
display: true,
color: '#ffffff',
zeroLineColor: '#ffffff',
}
}],
xAxes: [{
gridLines: {
display: true,
drawOnChartArea: false
},
}],
}
}
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[1]));
});
console.log(years, vals);
return { years, vals };
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Coding Train: Data and APIs Project 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART</h1>
<h2>This is the subhead for my chart </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
// Data from: https://data.giss.nasa.gov/gistemp/
// Mean from: https://earthobservatory.nasa.gov/world-of-change/DecadalTemp
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var dollar = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: dollar.years,
datasets: [
{
label: 'Voter support (%)',
data: dollar.vals,
backgroundColor: [
'#134D85',
'#134D85',
'#134D85',
'#134D85',
'#134D85',
],
}]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15,
}
},
scales: {
yAxes: [{
gridlines: {
display: true,
color: '#ffffff',
zeroLineColor: '#ffffff',
}
}],
xAxes: [{
gridLines: {
display: true,
drawOnChartArea: false
},
}],
}
}
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[1]));
});
console.log(years, vals);
return { years, vals };
}
</script>
</body>
</html>```
For a start next time might be a good idea to read the documentation and the migration guide.
Few things that are at least wrong:
Link name has changed to lower case so 2.9.4/Chart.js -> 3.5.0/chart.js
Scales have changed from 2 arrays to objects for each scale:
options: {
scales: {
x: {
// config for default x scale
},
x2: {
// config for second x scale
},
y: {
// config for default y scale
},
}
}
title and legend config have been moved to the plugins section so options.title -> options.plugins.title and options.legend -> options.plugins.legend.
Alternativly you could also just use an older release of the datalabels plugin that has been written for V2
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
Now,I would like to implement a polar area chart like following picture with Chart.js and Canvas.
How should I do to implement it?
So far,I tried the following code but it does not work.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById('chart')
const ctx = canvas.getContext('2d');
const gradient = ctx.createRadialGradient(75, 50, 5, 90, 60, 100)
const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
gradient.addColorStop(0.0 , 'rgb(255,0,0)');
gradient.addColorStop(0.5 , 'rgb(0,255,0)');
const data = {
backgroundColor: [gradient,gradient,gradient,gradient,gradient],
labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
datasets: [
{
label: 'First dataset',
backgroundColor: gradient,
data: [50, 20, 40, 50, 22]
}
]
};
const options = {
tooltips: {
mode: 'label'
},
};
const myRadarChart = new Chart(ctx, {
type: 'polarArea',
data,
options
});
});
</script>
</head>
<body>
<canvas id="chart" width="${width}" height="${width}" />
</body>
</html>
Try like this:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style media="screen" type="text/css">#container{width:100%;height:100%;top:0;left:0;right:0;bottom:0;position:absolute;}</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById('chart')
const ctx = canvas.getContext('2d');
const [ w , h ] = [ canvas.clientWidth , canvas.clientHeight ];
const r = 300;
const gradient = ctx.createRadialGradient(w, h*1.2, 0, w, h, r * 0.6);
gradient.addColorStop(0.0 , 'rgb(255,0,0)');
gradient.addColorStop(1 , 'rgb(0,255,0)');
const data = {
backgroundColor: [gradient,gradient,gradient,gradient,gradient],
labels: ['First label', 'Second label', 'Third label', 'Fourth label', 'Fifth label'],
datasets: [
{
label: 'First dataset',
backgroundColor: gradient,
data: [50, 20, 40, 50, 22]
}
]
};
const options = {
tooltips: {
mode: 'label'
},
};
const myRadarChart = new Chart(ctx, {
type: 'polarArea',
data,
options
});
});
</script>
</head>
<body>
<canvas id="chart" width="${width}" height="${width}" />
</body>
</html>
The code is good! It's only a case of using the canvas width, height and radius of the chart's largest circle to position the gradient correctly. Minor adjustments can also be made if the final chart position in the canvas shifts (e.g. where a different canvas aspect ratio is used).
From there, it is simple to create a new gradient in the same way for each combination of colours you wish to use.
My ChartJS chart is not displaying all the data. This is the closest question on SO to my problem. Implementing the answer to this question did not help (I tried both [{display: false}] and [{display: true}]).
I am a novice at chartjs having only started working with it some ~5 days ago. Any help or advice would be appreciated.
Basically, I am writing a chart that takes data collected by a Raspberry Pi and plots it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Harp comfort</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<h1>Temperature data</h1>
<canvas id="myChart"></canvas>
<script>
// Data from: Raspberry Pi Hat
window.addEventListener('load', setup);
var ops = {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
async function setup() {
const ctx = document.getElementById('myChart').getContext('2d');
const dataTemp = await getData();
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Temperature',
data: dataTemp.temp,
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.85)',
borderWidth: 2
}
]
},
options: ops
});
}
async function getData() {
const response = await fetch('./sample.csv');
const data = await response.text();
const temp = [];
const rows = data.split('\n').slice(1);
rows.forEach(row => {
const col = row.split(',');
temp.push(parseFloat(col[0]))
//console.log(col[0]) //for debugging purpose
});
return { temp };
}
//getData(); for debugging purpose
</script>
</body>
</html>
The CSV data (sample.csv) is available via this PasteBin page
I am answering my own question.
I was able to solve this problem by ensuring that the CSV data had 2 columns. A single column of data does not work. A two column data file (PasteBin Link) along with the modified code works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Harp Temperature and RH</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<h1>Harp comfort</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
// Data from: Raspberry Pi Hat
window.addEventListener('load', setup);
var ops = {
scales: {
xAxes: [{
display: false
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
async function setup() {
const ctx = document.getElementById('myChart').getContext('2d');
const dataTemp = await getData();
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dataTemp.timestamp,
datasets: [
{
label: 'Temperature',
data: dataTemp.temp,
fill: false,
borderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 0.85)',
borderWidth: 2
}
]
},
options: ops
});
}
async function getData() {
const response = await fetch('./sample.csv');
const data = await response.text();
const timestamp = [];
const temp = [];
const rows = data.split('\n').slice(1);
rows.forEach(row => {
const col = row.split(',');
timestamp.push(col[0])
temp.push(parseFloat(col[1]))
//console.log(col[0]) //for debugging purpose
});
return { temp, timestamp };
}
//getData(); for debugging purpose
</script>
</body>
</html>
I would love it if more refined answers (than my novice solution!) be posted.
I'm trying to make a chart like this screenshot.
Now i'm using chartjs as given below:-
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart"></canvas></div>
</div>
<script>
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false,'start'].forEach(function(boundary, index) {
utils.srand(8);
new Chart('chart', {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
});
</script>
</body>
</html>
There is issue this is not exactly as screenshot, how can i make it same as in screenshot?
You are using the charts correctly, and you are using the appropriate type: line. All you have to do to show a chart exactly as the image's is set the right values. I hope this gives you an idea
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
const canvas = document.getElementById('chart-' + index);
if(canvas)
{
utils.srand(8);
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
//data: generateData(),
data: [0, 0, 40, 0,0, 50, 0, 0, 0],
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
}
});
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
</div>
</body>
</html>