Related
I have a chart.js running, but i really want to add axis names on teh axises, but dont know how.
Could i get some help?
I have tried to figure it out by searching up, but can't find anything that explain it well.
What is am trying to get:
My chart code:
const ctx = document.getElementById('chart').getContext('2d');
window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function)
type: 'line',
data: {
labels: arrayTheta,
datasets: [{
//label: graphLabels,
data: arrayRangeArray[0],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
tension: 0.4 //The line "tension: 0.4" makes the graph a little bit smoother (might remove later)
},
{
//label: graphLabels,
data: arrayRangeArray[1],
backgroundColor: 'blue, 0.2',
borderColor: 'blue',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[2],
backgroundColor: 'pink, 0.2',
borderColor: 'pink',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[3],
backgroundColor: 'orange, 0.2',
borderColor: 'orange',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[4],
backgroundColor: 'yellow, 0.2',
borderColor: 'yellow',
pointRadius: 0,
tension: 0.4
},
{
//label: graphLabels,
data: arrayRangeArray[5],
backgroundColor: 'black, 0.2',
borderColor: 'black',
pointRadius: 0,
tension: 0.4
}],
},
options: {
scales: {
y: {
beginAtZero: true
}
,x: {
display: true,
type: 'linear'
}
}
}
});
It would be awesome if someone could implement it into my code and the send it here.
Thanks in advance!!
This can be done with the following options:
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Y-Axis Label'
}
},
x: {
title: {
display: true,
text: 'X-Axis Label'
}
}
}
}
For further information, consult Scale Title Configuration from the Chart.js documentation.
Please take a look at your amended code and see how it works with static data.
new Chart('chart', {
type: 'line',
data: {
labels: ['A', 'B','C','D','E'],
datasets: [{
label: 'Dataset 1',
data: [8, 7, 5, 6, 2],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 2',
data: [2, 4, 2, 4, 7],
backgroundColor: 'blue, 0.2',
borderColor: 'blue',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 3',
data: [5, 8, 7, 6, 2],
backgroundColor: 'pink, 0.2',
borderColor: 'pink',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 4',
data: [8, 7, 5, 6, 2],
backgroundColor: 'orange, 0.2',
borderColor: 'orange',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 5',
data: [5, 3, 2, 4, 1],
backgroundColor: 'yellow, 0.2',
borderColor: 'yellow',
pointRadius: 0,
tension: 0.4
},
{
label: 'Dataset 6',
data: [5, 6, 2, 8, 7],
backgroundColor: 'black, 0.2',
borderColor: 'black',
pointRadius: 0,
tension: 0.4
}
],
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Y-Axis Label'
}
},
x: {
title: {
display: true,
text: 'X-Axis Label'
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="chart" height="110"></canvas>
I want the chart to be much larger regardless of the values. Currently, the chart is the height in the picture and it does not change. This is the complete configuration for the chart I currently have. Is it possible for the chart to have more height regardless of the dataset values?
const KYCctx = document.getElementById('kycChart').getContext('2d');
const KYCChart = new Chart(KYCctx, {
type: 'bar',
data: {
labels: ["Approved", "Denied", "Pending"],
datasets: [{
data: [65, 59, 80],
backgroundColor: [
'rgba(203, 55, 55, 0.2)',
' rgba(39, 187, 101, 0.5)',
'rgba(255, 171, 45, 0.1)'
],
borderColor: [
' rgba(203, 55, 55, 1)',
'rgba(34, 195, 107, 1)',
'rgba(255, 171, 45, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgb(33,34,37)'
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 6,
generateLabels: (chart) => {
console.log(chart);
return chart.data.labels.map(
(label, index) => ({
text: label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
}
)
)
}
}
},
title: {
display: true,
align: "start",
color: "#ffff",
font: {
size: 18,
weight: 700,
lineHeight: 2
},
padding: {
bottom: 20
}
}
}
}
});
You could explicitly define the height on the canvas.
<canvas id="kycChart" height="400"></canvas>
const KYCChart = new Chart('kycChart', {
type: 'bar',
data: {
labels: ["Approved", "Denied", "Pending"],
datasets: [{
data: [65, 59, 80],
backgroundColor: [
'rgba(203, 55, 55, 0.2)',
' rgba(39, 187, 101, 0.5)',
'rgba(255, 171, 45, 0.1)'
],
borderColor: [
' rgba(203, 55, 55, 1)',
'rgba(34, 195, 107, 1)',
'rgba(255, 171, 45, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgb(33,34,37)'
}
}
},
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
boxWidth: 6,
generateLabels: (chart) => {
return chart.data.labels.map(
(label, index) => ({
text: label,
fillStyle: chart.data.datasets[0].backgroundColor[index],
strokeStyle: chart.data.datasets[0].backgroundColor[index],
})
)
}
}
},
title: {
display: true,
align: "start",
color: "#ffff",
font: {
size: 18,
weight: 700,
lineHeight: 2
},
padding: {
bottom: 20
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="kycChart" height="400"></canvas>
Given my chartJS config below
var ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.defaultFontColor = 'rgba(255, 255, 255, 1)';
Chart.defaults.global.defaultFontFamily = 'Arial';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Investment', 'Sustainable'],
datasets: [{
label: 'myLabel',
data: [11, 5],
backgroundColor: [
'rgba(234, 82, 4, 0.2)',
'rgba(0, 121, 109, 0.2)'
],
borderColor: [
'rgba(234, 82, 4, 1)',
'rgba(0, 121, 109, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
labels: {
display: true
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
scaleLabel: {
display: true,
},
}],
}
}
});
I need to get something as close as the following
Using Quickchart API, I am submitting the config through the URL, but I am having trouble setting the labels color? options:{legend:{labels:{fontColor: 'white'}},
https://quickchart.io/chart?c={type:%27bar%27,data:{labels:[%27Investment%27,%27Sustainable%20%27],datasets:[{label:%27myLabel%27,data:[11,5],backgroundColor:%20[%27rgba(234,%2082,%204,%200.2)%27,%27rgba(0,%20121,%20109,%200.2)%27],borderColor:%20[%27rgba(234,%2082,%204,%201)%27,%27rgba(0,%20121,%20109,%201)%27]}]}}
Gives me
Update 2
I am trying to construct the URL but I am getting some issues;
<script type="text/javascript">// <![CDATA[
var carbon = {
type: 'bar',
data: {
labels: ['Average Investment', 'Sustainable Investment'],
datasets: [{
label: 'Tonnes of CO2 per year',
data: [11, 5],
borderWidth: 1,
backgroundColor: ['rgba(234, 82, 4, 0.2)', 'rgba(0, 121, 109, 0.2)'],
borderColor: ['rgba(234, 82, 4, 1)', 'rgba(0, 121, 109, 1)'],
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
color: '#fff',
backgroundColor: 'rgba(34, 139, 34, 0.6)',
borderColor: 'rgba(34, 139, 34, 1.0)',
borderWidth: 1,
borderRadius: 5,
formatter: (value) => {
return value + 'k';
},
},
},
legend: {
labels: {
fontColor: 'white'
}
},
title: {
display: true,
text: 'Tones of CO2 pear year'
},
scales: {
xAxes: [{
ticks: {
fontColor: 'white'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontColor: 'white'
},
gridLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
}]
}
}
};
var link = JSON.stringify(carbon);
var link0 = JSON.parse(link);
var link2 = encodeURI(link0);
console.log(typeof link0+ " "+typeof link+" ------------------ "+typeof link2);
// ]]></script>
<div><img width="200" height="100" src="https://quickchart.io/chart?c="/></div>
Which should render the following
Which version of Chart.js are you using because it seems to be working fine with your config.
quickChart: https://quickchart.io/chart?bkg=%23002A5E&c={%20type:%20%27bar%27,%20data:%20{%20labels:%20[%27Investment%27,%20%27Sustainable%27],%20datasets:%20[%20{%20label:%20%27Tonnes%20of%20CO2%20per%20year%27,%20data:%20[11,%205],%20borderWidth:%201,%20backgroundColor:%20[%20%27rgba(234,%2082,%204,%200.2)%27,%20%27rgba(0,%20121,%20109,%200.2)%27%20],%20borderColor:%20[%20%27rgba(234,%2082,%204,%201)%27,%20%27rgba(0,%20121,%20109,%201)%27%20],%20}%20]%20},%20options:%20{%20legend:%20{labels:%20{fontColor:%20%27white%27}},%20scales:%20{%20xAxes:%20[{ticks:%20{fontColor:%20%27white%27}}],%20yAxes:%20[{%20ticks:%20{%20beginAtZero:%20true,%20fontColor:%20%27white%27%20},%20gridLines:%20{%20color:%20%27rgba(255,%20255,%20255,%200.1)%27%20},%20}]%20}%20}%20}
var options = {
type: 'bar',
data: {
labels: ['Investment', 'Sustainable'],
datasets: [{
label: 'Tonnes of CO2 per year',
data: [11, 5],
borderWidth: 1,
backgroundColor: [
'rgba(234, 82, 4, 0.2)',
'rgba(0, 121, 109, 0.2)'
],
borderColor: [
'rgba(234, 82, 4, 1)',
'rgba(0, 121, 109, 1)'
],
}]
},
options: {
legend: {
labels: {
fontColor: 'white'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: 'white'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
fontColor: 'white'
},
gridLines: {
color: 'rgba(255, 255, 255, 0.1)'
},
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #002A5E;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
In my requirement i want to display point without lines in line graphs with static background colors. I achieved almost but i am unable to set specific axes background color in chart. I used chart.js (line graphs). Please see my below code, i tried so much please see the attached image, i want to develop like that graph (o-10 axes 1 color like that, background color are fixed with that axes).
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [0,10, 20, 30, 40, 50, 60, 70, 80, 90],
datasets: [{
data: [0,350, 400, 150, 98, 220, 410],
label: "Man Engines",
// borderColor: "#3e95cd",
backgroundColor: 'rgba(244, 81, 30, 0.8)',
borderColor: 'rgba(244, 81, 30, 0.8)',
pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
pointBorderColor: 'rgba(244, 81, 30, 0.8)',
fill: false,
pointRadius: 5,
showLine: false
}
]
},
options: {
// title: {
// display: true,
// text: 'World population per region (in millions)'
// },
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
},
// ticks: {
// min: 1
// }
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
// legend: { display: false },
// fillColor: 'rgba(255, 128, 0, 0.8)',
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="line-chart"></canvas>
Like this output
Current Achieved Output
Instead of using type: line, you should use type: scatter.
You can then use chartjs-plugin-annotation.js to draw individual boxes and text on your chart.
new Chart(document.getElementById("line-chart"), {
type: 'scatter',
data: {
datasets: [{
data: [{x: 3, y: 398}, {x: 5, y: 350}, {x: 12, y: 396}, {x: 20, y: 160}, {x: 25, y: 100}, {x: 30, y: 195} ],
label: "Man Engines",
borderColor: 'rgba(244, 81, 30, 0.8)',
pointBackgroundColor: 'rgba(0, 0, 0, 1)',
pointBorderColor: 'rgba(244, 81, 30, 0.8)',
pointRadius: 5
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'BN [mgKOH/g]',
fontStyle: 'bold'
},
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 70,
stepSize: 10
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Iron (Fe) total [mg/kg]',
fontStyle: 'bold'
},
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 500,
stepSize: 100
}
}]
},
annotation: {
events: ["click"],
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 0,
xMax: 100,
yMin: 0,
yMax: 500,
backgroundColor: "rgba(212, 0, 0, 0.8)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 10,
xMax: 100,
yMin: -10,
yMax: 300,
backgroundColor: "rgba(255, 255, 0, 0.8)",
borderColor: "rgba(255, 128, 0, 0.5)",
borderWidth: 6
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 15,
xMax: 45,
yMin: -10,
yMax: 200,
backgroundColor: "rgba(0, 128, 0, 0.8)",
borderColor: "rgba(128, 255, 0, 0.5)",
borderWidth: 6
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 400,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
fontStyle: 'normal',
fontSize: 18,
fontColor: 'white',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Danger - Do not operate in this area",
enabled: true
}
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 250,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
xAdjust: 40,
fontStyle: 'normal',
fontSize: 18,
fontColor: 'black',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Alert area - Adjustment of feed rate may be needed",
enabled: true
}
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 150,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
xAdjust: -50,
fontStyle: 'normal',
fontSize: 18,
fontColor: 'white',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Save area",
enabled: true
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="line-chart"></canvas>
I am using chart.js version 2.5.0 and need to know if there any way to hide the empty bars from each group in a grouped stacked bar chart? Some data values in chart datasets can be null.
Here is what I want:
Combo Chart Type (Grouped and Stacked)
var options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
return null;
return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
labels: {
show: true
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: false
},
labels: {
show: false
}
}, {
type: "linear",
display: true,
gridLines: {
display: true
},
labels: {
show: true
},
ticks: {
beginAtZero: false,
userCallback: function(value) {
return numeral(value).format('($ 0.0 a)');
}
}
}, {
type: "linear",
display: false,
gridLines: {
display: false
},
labels: {
show: true
}
}, {
type: "linear",
display: false,
gridLines: {
display: false
},
labels: {
show: true
}
}, {
type: "linear",
display: false,
gridLines: {
display: false
},
labels: {
show: true
}
}, {
type: "linear",
display: false,
id: "y-axis-5",
gridLines: {
display: false
},
labels: {
show: true
}
}]
},
legend: {
labels: {
fontSize: 11,
usePointStyle: true,
padding: 15,
filter: (legendItem, chartData) => {
if (legendItem.datasetIndex > 0) return true;
}
}
}
}
var data = {
labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
datasets: [{
type: 'bar',
label: "Opening Balance",
data: [1120000],
fill: true,
backgroundColor: 'rgba(243, 194, 0, .3)',
borderWidth: 1,
borderColor: '#F3C200',
hoverBackgroundColor: '#F3C200',
hoverBorderColor: '#7d6505',
stack: 'OB'
}, {
type: 'bar',
label: "Income",
data: [, 210000, 258900, 475669, 402569],
fill: true,
backgroundColor: 'rgba(42, 180, 192, .3)',
borderWidth: 1,
borderColor: '#166269',
hoverBackgroundColor: '#2ab4c0',
hoverBorderColor: '#2ab4c0',
stack: 'Income'
}, {
type: 'bar',
label: "Income Expected",
data: [, 215000, 320000, 412236, 385569],
fill: true,
backgroundColor: 'rgba(76, 135, 185, .4)',
borderWidth: 1,
borderColor: '#2a587f',
hoverBackgroundColor: '#4c87b9',
hoverBorderColor: '#2a587f',
stack: 'Income'
}, {
type: 'bar',
label: "Expenditures",
data: [, 204560, 256987, 236981, 365587],
fill: true,
backgroundColor: 'rgba(243, 82, 58, .3)',
borderWidth: 1,
borderColor: '#f3523a',
hoverBackgroundColor: '#f56954',
hoverBorderColor: '#f3523a',
stack: 'Expenditures'
}, {
type: 'bar',
label: "Expenditures Expected",
data: [, 269877, 325698, 435887, 423369],
fill: true,
backgroundColor: 'rgba(228, 58, 69, .4)',
borderWidth: 1,
borderColor: '#b32a33',
hoverBackgroundColor: '#e43a45',
hoverBorderColor: '#b32a33',
stack: 'Expenditures'
}, {
label: "Balance",
type: 'bar',
data: [, 54400, 19013, 14569, 24998],
fill: true,
borderColor: '#1ebfae',
backgroundColor: 'rgba(30, 191, 174, .3)',
borderWidth: 1,
hoverBackgroundColor: '#1ebfae',
hoverBorderColor: '#099486',
stack: 'Balance'
}]
};
new Chart(document.getElementById("fundStatus").getContext('2d'), {
type: 'bar',
data: data,
options: options
});
The fiddle: https://jsfiddle.net/q_sabawoon/atLxLg7x/
Please help.
This problem can be solved by defining two separate x-axes as follows:
xAxes: [{
id: 'opening',
display: false
},
{
id: 'quarter',
offset: true,
gridLines: {
offsetGridLines: true
}
}]
Then link the datasets with option xAxisID to their corresponding x-axis:
datasets: [{
label: "Opening Balance",
...
xAxisID: "opening"
}, {
label: "Income",
...
xAxisID: "quarter" // the same for all other datasets
}
...
Please take a look at your amended code and see how it works.
var options = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
return null;
return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
}
}
},
scales: {
xAxes: [{
id: 'opening',
display: false
},
{
id: 'quarter',
offset: true,
gridLines: {
offsetGridLines: true
}
}
],
yAxes: [{
ticks: {
beginAtZero: false,
userCallback: function(value) {
return numeral(value).format('($ 0.0 a)');
}
}
}]
},
legend: {
labels: {
fontSize: 11,
usePointStyle: true,
padding: 15,
filter: (legendItem, chartData) => {
if (legendItem.datasetIndex > 0) return true;
}
}
}
}
var data = {
labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
datasets: [{
label: "Opening Balance",
data: [1120000],
backgroundColor: 'rgba(243, 194, 0, .3)',
borderWidth: 1,
borderColor: '#F3C200',
hoverBackgroundColor: '#F3C200',
hoverBorderColor: '#7d6505',
stack: 'OB',
categoryPercentage: 0.6,
xAxisID: "opening"
}, {
label: "Income",
data: [,210000, 258900, 475669, 402569],
backgroundColor: 'rgba(42, 180, 192, .3)',
borderWidth: 1,
borderColor: '#166269',
hoverBackgroundColor: '#2ab4c0',
hoverBorderColor: '#2ab4c0',
stack: 'Income',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Income Expected",
data: [,215000, 320000, 412236, 385569],
backgroundColor: 'rgba(76, 135, 185, .4)',
borderWidth: 1,
borderColor: '#2a587f',
hoverBackgroundColor: '#4c87b9',
hoverBorderColor: '#2a587f',
stack: 'Income',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Expenditures",
data: [,204560, 256987, 236981, 365587],
backgroundColor: 'rgba(243, 82, 58, .3)',
borderWidth: 1,
borderColor: '#f3523a',
hoverBackgroundColor: '#f56954',
hoverBorderColor: '#f3523a',
stack: 'Expenditures',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Expenditures Expected",
data: [,269877, 325698, 435887, 423369],
backgroundColor: 'rgba(228, 58, 69, .4)',
borderWidth: 1,
borderColor: '#b32a33',
hoverBackgroundColor: '#e43a45',
hoverBorderColor: '#b32a33',
stack: 'Expenditures',
categoryPercentage: 1,
xAxisID: "quarter"
}, {
label: "Balance",
data: [,54400, 19013, 14569, 24998],
borderColor: '#1ebfae',
backgroundColor: 'rgba(30, 191, 174, .3)',
borderWidth: 1,
hoverBackgroundColor: '#1ebfae',
hoverBorderColor: '#099486',
stack: 'Balance',
categoryPercentage: 1,
xAxisID: "quarter"
}]
};
const chart = new Chart("fundStatus", {
type: 'bar',
data: data,
options: options
});
#fundStatus {
min-height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="fundStatus"></canvas>