I am fairly new to Chart.js and I have tried a lot of different ways of doing this but I just can not seem to resolve loading data from JSON in to a bar type chart.
I am trying to display a chart of monthly expenses with latest version of Chart.js.
The JSON string is as follows:
[{"month":"Jan","amount":"0.00"},{"month":"Feb","amount":"0.00"},{"month":"Mar","amount":"100.00"},{"month":"Apr","amount":"0.00"},{"month":"May","amount":"0.00"},{"month":"Jun","amount":"977.00"},{"month":"Jul","amount":"0.00"},{"month":"Aug","amount":"0.00"},{"month":"Sep","amount":"0.00"},{"month":"Oct","amount":"0.00"},{"month":"Nov","amount":"0.00"},{"month":"Dec","amount":"0.00"}]
My code is as follows:
$(function () {
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
if( $("#ChartExpenseBar").length > 0 ){
$.ajax({
type: 'POST',
url: '/expenses/',
data: {'expense_chart': 'monthly'},
success: function(data) {
var months = [];
var amount = [];
for (var i in data) {
months.push(data[i].month);
amount.push(data[i].amount);
}
var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
//labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: months,
datasets: [{
label: 'Monthly expenses',
backgroundColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderWidth: 1,
data: amount
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return "£" + tooltipItem.yLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
// Convert the array to a string and format the output
value = value.join('.');
return '£' + value;
}
}
}]
}
}
});
},
error: function() {
alert("There is a problem with loading the chart!");
}
});
}
});
I can most likely imagine myself doing something very silly that is causing an undefined error, and I would love to see someone help me please.
Much appreciated and thank you.
Your chart does a POST?
Try something along that lines:
$.ajax({
url: '/expenses/',
async: false,
dataType: 'json',
type: "GET",
success: function (d) {
chartData = {
labels: d.AxisLabels,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: d.DataSets[0]
}
]
};
max = Math.max.apply(Math, d.DataSets[0]);
steps = 10;
respondCanvas();
}
});
};
Minimal reproduction of your code seems to indicate that it is working fine, except the 2 options responsive and maintainAspectRatio (they works fine if the chart is contained in a div). Copy and paste as a new html file into your web server to view.
Key changes made from your sample code:
AJAX API call changed to GET from ./
Added fake success data
Note: responsive and maintainAspectRatio seems to cause the chart to "tremble", unless the chart is wrapped in a div
The problem could lie in elsewhere, maybe in your server response?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" integrity="sha256-JG6hsuMjFnQ2spWq0UiaDRJBaarzhFbUxiUTxQDA9Lk=" crossorigin="anonymous"></script>
<div style="width:500px;">
<canvas id="ChartExpenseBar" width="200" height="200"></canvas>
</div>
<script>
$(function () {
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
if( $("#ChartExpenseBar").length > 0 ){
$.ajax({
type: 'GET',
url: './',
data: {'expense_chart': 'monthly'},
success: function(data) {
var months = [];
var amount = [];
// fill with fake data
data = [{"month":"Jan","amount":"0.00"},{"month":"Feb","amount":"0.00"},{"month":"Mar","amount":"100.00"},{"month":"Apr","amount":"0.00"},{"month":"May","amount":"0.00"},{"month":"Jun","amount":"977.00"},{"month":"Jul","amount":"0.00"},{"month":"Aug","amount":"0.00"},{"month":"Sep","amount":"0.00"},{"month":"Oct","amount":"0.00"},{"month":"Nov","amount":"0.00"},{"month":"Dec","amount":"0.00"}];
for (var i in data) {
months.push(data[i].month);
amount.push(data[i].amount);
}
var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
//labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
labels: months,
datasets: [{
label: 'Monthly expenses',
backgroundColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderWidth: 1,
data: amount
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return "£" + tooltipItem.yLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
// Convert the array to a string and format the output
value = value.join('.');
return '£' + value;
}
}
}]
}
}
});
},
error: function() {
alert("There is a problem with loading the chart!");
}
});
}
});
</script>
In case anyone finds themselves in a similar position, I have highlighted the answer to the above problem below - thank you to wp78de and Edwin.
$(function () {
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
if( $("#ChartExpenseBar").length > 0 ){
$.ajax({
type: 'GET',
async: false,
dataType: 'json',
url: '/expenses/',
data: {'expense_chart': 'monthly'},
success: function(data) {
var months = [];
var amount = [];
for (var i in data) {
months.push(data[i].month);
amount.push(data[i].amount);
}
var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: months,
datasets: [{
label: 'Monthly expenses',
backgroundColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderColor: [
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange,
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.purple,
chartColors.green,
chartColors.orange
],
borderWidth: 1,
data: amount
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
displayColors: false,
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return "£" + tooltipItem.yLabel;
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
// Convert the number to a string and splite the string every 3 charaters from the end
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
// Convert the array to a string and format the output
value = value.join('.');
return '£' + value;
}
}
}]
}
}
});
},
error: function() {
alert("There is a problem with loading the chart!");
}
});
}
});
Related
I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.
So I've made this chart.js on my website, but one of my users said: The new bars showing the status for run tests is now too narrow, making it almost impossible to identify which one is hovered over.
How can I make it size better to a 3440x1440 screen, zoom at 100% in Chrome?
Thought about making the css size 80% width, and then no height. So it would fit the page, but then is was a veeeery long graph on a 3440x1440 screen.
The chart is this:
.canvasStyle {
height: 400px;
width: 900px;
}
<div class="row justify-content-center">
<div class="canvasStyle">
<canvas id='chart_1' ></canvas>
</div>
</div>
<script>
var TestInformation = <?php echo json_encode($TestInformation); ?>;
var pass = <?php echo json_encode($pass); ?>;
var fail = <?php echo json_encode($fail); ?>;
var error = <?php echo json_encode($error); ?>;
var notrun = <?php echo json_encode($notrun); ?>;
var na = <?php echo json_encode($na); ?>;
var version = <?php echo json_encode($version); ?>;
var title = <?php echo json_encode($title); ?>;
searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na);
</script>
function searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na) {
// Display the array elements
window.onload = function() {
var xValues = TestInformation;
new Chart("chart_1", {
type: 'bar',
data: {
labels: xValues,
datasets: [{
label: 'Passed',
data: pass,
backgroundColor: 'rgb(150,238,144)'
},
{
label: 'Failed',
data: fail,
backgroundColor: 'rgb(204,0,0)'
},
{
label: 'Not Run',
data: notrun,
backgroundColor: 'rgb(0,109,204)'
},
{
label: 'Error',
data: error,
backgroundColor: 'rgb(204,112,0)'
},
{
label: 'NA',
data: na,
backgroundColor: 'rgb(33,33,33)'
}
]
},
options: {
title: {
display: true,
text: title
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
stepSize: 1,
min: 0,
autoSkip: false,
display: false
}
}],
yAxes: [{
stacked: true,
ticks: {
maxTicksLimit: 5,
min: 0,
beginAtZero: true,
userCallback: function(label, index, labels) {
if (Math.floor(label) === label) {
return label;
}
},
}
}]
}
}
});
};
}
Okay there you have it:
var ctx = document.getElementById('myChart').getContext('2d');
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)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive:true,
maintainAspectRatio:false,
scales: {
y: {
beginAtZero: true
}
}
}
});
.overflow-auto-size{
width:400px;
heigth:50px;
overflow:auto;
}
.big{
width:1000px;
heigth:50px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.4.1/dist/chart.min.js"></script>
<div class="overflow-auto-size">
<div class="big">
<canvas id="myChart"></canvas>
</div>
</div>
I'm passing the following config to Chart.js:
{
type: 'doughnut',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
data: [878, 19020, 100412286],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
}
}
But because of the huge difference between all three (given how much bigger c is), c ends up "overlapping" everything else and I just get a doughnut with only one color, showing only c.
If I try a smaller value for c all three sectors show up fine.
But I don't understand, Chart.js should've been able to show all pieces (set a minimum size for the smallest sector etc.)
Is there some parameter I can pass to the config to fix this ?
You can use a logarithmic scale but only for lines. A donut is not a good choice for your use case
https://www.chartjs.org/docs/latest/samples/scales/log.html
Config:
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart - Logarithmic'
}
},
scales: {
x: {
display: true,
},
y: {
display: true,
type: 'logarithmic',
}
}
},
};
Setup:
const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: logNumbers(DATA_COUNT),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
fill: false,
},
]
};
Action
const logNumbers = (num) => {
const data = [];
for (let i = 0; i < num; ++i) {
data.push(Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5)));
}
return data;
};
const actions = [
{
name: 'Randomize',
handler(chart) {
chart.data.datasets.forEach(dataset => {
dataset.data = logNumbers(chart.data.labels.length);
});
chart.update();
}
},
];
One alternative is using 3 datasets, one for each data.
labels: ['a', 'b', 'c'],
datasets: [
{
label: "My First Dataset",
data: [878,0,0],
backgroundColor: [
"rgb(255, 205, 86)",
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
],
offset:0,
hoverOffset: 0,
},
{
label: "My First Dataset2",
data: [0,19020,0],
backgroundColor: [
"rgb(255, 205, 86)",
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
],
offset:0,
hoverOffset: 0,
},
{
label: "My First Dataset2",
data: [0,0,100412286],
backgroundColor: [
"rgb(255, 205, 86)",
"rgb(255, 99, 132)",
"rgb(54, 162, 235)",
],
offset:0,
hoverOffset: 0,
},
],
I hope this help.
I'm trying to visualize the following dataset with chart.js
var data =
{
"count": 2,
"result": {
"2020-01-22": {
"confirmed": 12,
"deaths": 5,
"recovered": 4
},
"2020-01-23": {
"confirmed": 20,
"deaths": 3,
"recovered": 2
}
}
}
So far I've figured out how to use the dates as label.
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
data: { // mapping the dates as labels
labels: Object.entries(data.result).map( (item) => item[0]),
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: ??
},{
label: 'My Second dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: ??
},{
label: 'My Third dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: ??
}]
}, // Configuration options go here
options: {}
});
I'd like to display the values of 'confirmed', 'deaths' and 'recovered' as three lines within this chart. Therefore I would include three different datasets right? How would I access the required information from json as array to populate the data arrays?
Thanks for your support
just map the key and values to appropriate arrays and consume them as datasets and labels.
var data = {
"count": 2,
"result": {
"2020-01-22": {
"confirmed": 12,
"deaths": 5,
"recovered": 4
},
"2020-01-23": {
"confirmed": 20,
"deaths": 3,
"recovered": 2
}
}
}
var dates = Object.keys(data["result"]).map(x => x);
var confirm = Object.values(data.result).map(x => x.confirmed);
var deaths = Object.values(data.result).map(x => x.deaths);
var recovered = Object.values(data.result).map(x => x.recovered);
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: dates,
datasets: [{
label: 'confirmed',
data: confirm,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},
{
label: 'Deaths',
data: deaths,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}, {
label: 'recovered',
data: recovered,
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="100" height="50"></canvas>
I am using chart.js and it's bar chart. I am displaying some data for the period of 12 months. What I would like to do is to set the width of the bar that is representing current month to a higher value than the others. But, I am not sure how to do this, since I only saw an option of setting the width to every bar in the dataset. This are my options that I currently have:
const options = {
type: "bar",
data: {
labels: counties.map(county => dateStringEU(county.Date.split(" ")[0])).reverse(),
datasets: [
{
backgroundColor: "#006BE8",
borderColor: "rgba(151,187,205,1)",
barPercentage: 0.9,
categoryPercentage: 0.9,
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
fontColor: '#736B8A',
beginAtZero: true,
stepSize: 100
},
gridLines: {
display: false
}
}
],
xAxes: [
{
ticks: {
fontColor: '#736B8A'
},
gridLines: {
display: false
}
}
]
}
}
}
Is it possible to set the width individually for each bar and how can we do it if so?
Despite it's not clearly documented, you can define barPercentage as an array of values.
barPercentage: [0.5, 0.5, 0.5, 0.5, 1, 0.5, 0.5],
Please have a look at the amended code from Chart.js bar documentation.
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: [0.5,0.5,0.5,0.5,1,0.5,0.5],
categoryPercentage: 1,
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>