I have three arrays that I am parsing in from an XML file, detailed below:
["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"]
["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"]
["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"]
Let's say these are called arrayX, arrayY and arrayR. How would I go about using these to render a bubble chart in Chart.js?
I have the code to create a simple bubble chart here:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: 'Gaze Map Month 1',
data: [
{
x: 23,
y: -10,
r: 10
},
{
x: -10.713591,
y: -24.425175,
r: 3
},
{
x: -20.516543,
y: 9.131939,
r: 36
},
{
x: 27.352751,
y: 7.052970,
r: 19
},
{
x: -21.090982,
y: -26.059631,
r: 2
}
],
backgroundColor:"#FF6384",
hoverBackgroundColor: "#FF6384",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
xAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}]
}
}
});
Note the format of the arrays can be changed if need be, so that just the values are used.
Since your are getting data dynamically, just iterate over your data and build a chartData object in the format that chart.js requires. Once you have assembled your data, just use that in your chart definition. See the below example
var xArray = ["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"];
var yArray = ["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"];
var rArray = ["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"];
var chartData = [];
xArray.forEach(function(e, i) {
chartData.push({
x: parseFloat(e),
y: parseFloat(yArray[i]),
r: parseFloat(rArray[i]),
});
});
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bubble',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: 'Gaze Map Month 1',
data: chartData,
backgroundColor:"#FF6384",
hoverBackgroundColor: "#FF6384",
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: -30,
max: 30
}
}],
}
}
}
});
Related
I want to get specific hidden data like custId2345 when a bar is clicked, and then run a function.
How should I assign this data to its bar without showing on chart?
You can define your data in object format and then you can just add a custom property that you read in the onClick method like so:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 12,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Blue",
y: 19,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 5,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Purple",
y: 2,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 3,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [{
x: "Red",
y: 7,
secretVal: "Not rick roll"
},
{
x: "Blue",
y: 11,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 5,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 8,
secretVal: "Not rick roll"
},
{
x: "Purple",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 7,
secretVal: "Not rick roll"
}
],
backgroundColor: 'orange'
}
]
},
options: {
onClick: (e, activeEls, chart) => {
if (activeEls.length === 0) {
return;
}
const cEl = activeEls[0];
console.log(chart.data.datasets[cEl.datasetIndex].data[cEl.index].secretVal)
}
}
}
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.7.0/chart.js"></script>
</body>
I've been trying to implement a Stacked Area Line Chart using Chart.js, which in turn uses multiple datasets as an input for each line graph.
Although I'am able to view the final stacked chart with the associated dataset, I can clearly notice that y-axis data is falsely represented(hover on data-point) w.r.t x-axis for each dataset, which is a major issue.
Major issues are:
x-axis and y-axis mapping issue for 2nd dataset chart onwards
x-axis values (dates) are repetitive and not in order - causes an abrupt display of chart
To be more clear, I need dataset1[ {x: "2030*08-03", y: 8},{}...] to precisely map keys x and y to the respective x-axis and y-axis of chart1, similary, dataset2[ {x: "2030*08-10", y: 8},{}...] mapping to the 2nd chart respectively and so on.
This is the sample codepen implementation replicating the issue.
Also, I'm adding the complete code snippet for a clear understanding.
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: 'rgb(0,128,0,0.2)',
stroke: 'green',
},
grey: {
fill: 'rgb(128,128,128, 0.2)',
stroke: 'grey',
},
red: {
fill: 'rgba(255, 0, 0, 0.2)',
stroke: 'red',
}
};
const data1 = [
{x: "2030*08-03", y: 8},
{x: "2030-08-04", y: 1},
{x: "2030-08-08", y: 2},
{x: "2030-08-09", y: 10},
{x: "2030-08-10", y: 2},
{x: "2030-08-12", y: 34} ];
const data2 = [
{x: "2030-08-09", y: 1},
{x: "2030-08-12", y: 12},
{x: "2030-08-13", y: 3},
{x: "2030-08-15", y: 3}
];
const data3 = [
{x: "2030-08-06", y: 1},
{x: "2030-08-09", y: 12},
{x: "2030-08-10", y: 3},
{x: "2030-08-12", y: 3} , ];
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: "Data1",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: data1,
},
{
label: "Data2",
fill: true,
backgroundColor: colors.grey.fill,
pointBackgroundColor: colors.grey.stroke,
borderColor: colors.grey.stroke,
pointHighlightStroke: colors.grey.stroke,
data: data2,
},
{
label: "Data3",
fill: true,
backgroundColor: colors.red.fill,
pointBackgroundColor: colors.red.stroke,
borderColor: colors.red.stroke,
pointHighlightStroke: colors.red.stroke,
data: data3,
}
]
},
options: {
plugins: {
responsive: true,
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Status',
padding: {
top: 20,
bottom: 15
},
font: {
weight: "bold",
size: 25
}
}
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 25
}
},
scales: {
x: {
ticks: {
align: "center"
}
},
y: {
stacked: true,
title: {
display: true,
text: "Count",
font: {
weight: "bold",
size: 20
}
}
},
},
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Any help will be greatly appreciated. Thanks in advance.
This behaviour is happening because chart.js automatically adds the labels if they are not there and doesnt care about ordering, you have 2 ways of fixing it, providing a labels array with all the labels in correct order already:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: 'rgb(0,128,0,0.2)',
stroke: 'green',
},
grey: {
fill: 'rgb(128,128,128, 0.2)',
stroke: 'grey',
},
red: {
fill: 'rgba(255, 0, 0, 0.2)',
stroke: 'red',
}
};
const data1 = [{
x: "2030-08-03",
y: 8
},
{
x: "2030-08-04",
y: 1
},
{
x: "2030-08-08",
y: 2
},
{
x: "2030-08-09",
y: 10
},
{
x: "2030-08-10",
y: 2
},
{
x: "2030-08-12",
y: 34
}
];
const data2 = [{
x: "2030-08-09",
y: 1
},
{
x: "2030-08-12",
y: 12
},
{
x: "2030-08-13",
y: 3
},
{
x: "2030-08-15",
y: 3
}
];
const data3 = [{
x: "2030-08-06",
y: 1
},
{
x: "2030-08-09",
y: 12
},
{
x: "2030-08-10",
y: 3
},
{
x: "2030-08-12",
y: 3
},
];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2030-08-03", "2030-08-04", "2030-08-06", "2030-08-08", "2030-08-09", "2030-08-10", "2030-08-12", "2030-08-13", "2030-08-15"],
datasets: [{
label: "Data1",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: data1,
},
{
label: "Data2",
fill: true,
backgroundColor: colors.grey.fill,
pointBackgroundColor: colors.grey.stroke,
borderColor: colors.grey.stroke,
pointHighlightStroke: colors.grey.stroke,
data: data2,
},
{
label: "Data3",
fill: true,
backgroundColor: colors.red.fill,
pointBackgroundColor: colors.red.stroke,
borderColor: colors.red.stroke,
pointHighlightStroke: colors.red.stroke,
data: data3,
}
]
},
options: {
plugins: {
responsive: true,
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Status',
padding: {
top: 20,
bottom: 15
},
font: {
weight: "bold",
size: 25
}
}
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 25
}
},
scales: {
x: {
ticks: {
align: "center"
}
},
y: {
stacked: true,
title: {
display: true,
text: "Count",
font: {
weight: "bold",
size: 20
}
}
},
},
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>
Codepen: https://codepen.io/leelenaleee/pen/gOWNXKm?editors=1010
Or you can use a time axis:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: 'rgb(0,128,0,0.2)',
stroke: 'green',
},
grey: {
fill: 'rgb(128,128,128, 0.2)',
stroke: 'grey',
},
red: {
fill: 'rgba(255, 0, 0, 0.2)',
stroke: 'red',
}
};
const data1 = [{
x: "2030-08-03",
y: 8
},
{
x: "2030-08-04",
y: 1
},
{
x: "2030-08-08",
y: 2
},
{
x: "2030-08-09",
y: 10
},
{
x: "2030-08-10",
y: 2
},
{
x: "2030-08-12",
y: 34
}
];
const data2 = [{
x: "2030-08-09",
y: 1
},
{
x: "2030-08-12",
y: 12
},
{
x: "2030-08-13",
y: 3
},
{
x: "2030-08-15",
y: 3
}
];
const data3 = [{
x: "2030-08-06",
y: 1
},
{
x: "2030-08-09",
y: 12
},
{
x: "2030-08-10",
y: 3
},
{
x: "2030-08-12",
y: 3
},
];
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Data1",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: data1,
},
{
label: "Data2",
fill: true,
backgroundColor: colors.grey.fill,
pointBackgroundColor: colors.grey.stroke,
borderColor: colors.grey.stroke,
pointHighlightStroke: colors.grey.stroke,
data: data2,
},
{
label: "Data3",
fill: true,
backgroundColor: colors.red.fill,
pointBackgroundColor: colors.red.stroke,
borderColor: colors.red.stroke,
pointHighlightStroke: colors.red.stroke,
data: data3,
}
]
},
options: {
plugins: {
responsive: true,
legend: {
display: true,
position: 'bottom',
},
title: {
display: true,
text: 'Status',
padding: {
top: 20,
bottom: 15
},
font: {
weight: "bold",
size: 25
}
}
},
layout: {
padding: {
left: 20,
right: 0,
top: 0,
bottom: 25
}
},
scales: {
x: {
type: 'time',
ticks: {
align: "center"
}
},
y: {
stacked: true,
title: {
display: true,
text: "Count",
font: {
weight: "bold",
size: 20
}
}
},
},
parsing: {
xAxisKey: 'x',
yAxisKey: 'y'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" width="400" height="100"></canvas>
Codepen: https://codepen.io/leelenaleee/pen/GRmbOxN?editors=1010
I have created a time series graph out of two data set. Now problem is there is an additional data that I would like to use and display in tooltip but I am not sure how to do it. I did some search and I kind of believe that this can be achieved via callbacks but don't know how to handle it. Right now the tooltip displays x and y values along with it I would like to display r value as well.
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
tooltips callbacks is your need Link info
and this is your need to reach r
data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: { datasets: [s1, s2] },
options: {
tooltips:{
callbacks: {
title: function(tooltipItem,data) {
console.log(data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r);
return "I am title";
},
label: function(tooltipItem) {
return "I am content";
}
}
} ,
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
You'll have to create a custom tooltip and then append the r value to it.
You can read about tooltips over here
You can access a particular attribute of a tooltip's point like this:
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
I wrote a custom callback to do this for you :)
var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
label: 'source',
borderColor: 'blue',
data: [
{ x: '2020-05-11T04:58:37Z', y: 25, r:3001},
{ x: '2020-05-11T04:59:17Z', y: 27, r:3002},
{ x: '2020-05-11T04:59:57Z', y: 21, r:3003},
{ x: '2020-05-11T05:00:37Z', y: 21, r:3004},
{ x: '2020-05-11T05:01:17Z', y: 21, r:3456},
{ x: '2020-05-11T05:01:57Z', y: 0.04, r:3243}
]
};
var s2 = {
label: 'target',
borderColor: 'red',
data: [
{ x: '2020-05-11T04:58:37Z', y: 28, r:3234},
{ x: '2020-05-11T04:59:17Z', y: 31, r:3232},
{ x: '2020-05-11T04:59:57Z', y: 27, r:5332},
{ x: '2020-05-11T05:00:37Z', y: 30, r:3342},
{ x: '2020-05-11T05:00:57Z', y: 30, r:3234},
{ x: '2020-05-11T05:01:17Z', y: 0.033, r:3343}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [s1, s2]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ':';
}
label += tooltipItem.yLabel;
r = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
label += " r: " + r;
return label;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>
I'm trying to create a ChartJs Bar chart which contains date on labels.
The chart bars over lap with each other unevenly. Works well when the time scale is removed however, the labels are not date sorted. The labels and data are dynamically populated, so cannot sort it before rendering.
Below is the sample image,
And, if the scales (xAxis) is removed, it give proper output (but not sorted)
example: https://codepen.io/karthikkbala/pen/QWjVQqb
Sample data:
[ "2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10", ]
[ 20, 11, 9, 22, 11, 9, ]
You can omit labels in the chart configuration and instead generate data as individual points through objects containing x and y properties as shown here.
const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));
This produces the following data.
[
{ "x": "2020-05-13", "y": 20 },
{ "x": "2020-05-11", "y": 11 },
{ "x": "2020-05-12", "y": 9 },
{ "x": "2020-05-14", "y": 22 },
{ "x": "2020-05-09", "y": 11 },
{ "x": "2020-05-10", "y": 9 }
]
The xAxis would then have to be defined as follows:
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
source: 'data',
tooltipFormat: 'MMM DD'
}
}],
Please have a look at your amended code below.
const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));
var chartData = {
datasets: [{
label: "All Detections",
backgroundColor: "#02a499",
borderColor: "#ffffff",
borderWidth: 1,
hoverBackgroundColor: "#02a499",
hoverBorderColor: "#02a499",
data: data
}]
};
new Chart("ChartByDate", {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
source: 'data',
tooltipFormat: 'MMM DD'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="ChartByDate"></canvas>
Using chartjs, I setup the following chart:
function myFunction(){
var options = {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [
{
data: [26, 26, 29, 28, 29],
borderWidth: 2,
fill: false,
lineTension: 0
},
{
data: [26, 26, 33, 28, 30],
borderWidth: 2,
fill: false,
lineTension: 0,
}
]
},
options: {
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
}
I want to move the points and the x-axis numbers to the right, sothat they are positioned between the axis lines. (like: 1 between 1 and 2; 2 between 2 and 3; etc.) See below:
How can I do this?
Here is how you can do this :
ꜰɪʀꜱᴛ
Set default chart type to bar , like so :
var options = {
type: 'bar',
data: {
...
ꜱᴇᴄᴏɴᴅ
Set first dataset's type to line , as such :
...
datasets: [{
type: 'line',
data: [26, 26, 29, 28, 29],
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
function myFunction() {
var options = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
type: 'line',
data: [26, 26, 29, 28, 29],
borderColor: 'rgba(0, 119, 220, 1)',
borderWidth: 2,
fill: false,
lineTension: 0
}, {
data: [26, 26, 33, 28, 30],
borderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
}
myFunction();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartJSContainer"></canvas>