I have a standard horizontally stacked graph but it seem to have a big gap between the graph and the legend (represented by the big red circle bellow)
I have looked upon many configuration options but I can't find where does it come from
$(function(){
myBarChart = new Chart($("#myChart"), {
type: 'horizontalBar',
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
},
{
label: 'Open : 12 (5%)',
data: [12],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}
]
},
options: {
//tooltips: { enabled: false },
maintainAspectRatio: false,
responsive: true,
legend: {
position: "right"
},
scales: {
xAxes: [{
max: 82,
display: false,
gridLines: {
display: false
},
stacked: true
}],
yAxes: [{
max: 82,
display: false,
gridLines: {
display: false,
},
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
});
Edit : Woopsie, I had forgot to add the fiddle I made :
http://jsfiddle.net/uLUAT/1165/
Use
xAxes: [{
ticks: { max: 82 },
...
}]
instead of
xAxes: [{
max: 82,
...
}]
$(function(){
myBarChart = new Chart($("#myChart"), {
type: 'horizontalBar',
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
},
{
label: 'Open : 12 (5%)',
data: [12],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}
]
},
options: {
//tooltips: { enabled: false },
maintainAspectRatio: false,
responsive: true,
legend: {
position: "right"
},
scales: {
xAxes: [{
ticks: { max: 82 },
display: false,
gridLines: {
display: false
},
stacked: true
}],
yAxes: [{
max: 82,
display: false,
gridLines: {
display: false,
},
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div style="border:1px solid black">
<canvas id="myChart" height="100"></canvas>
</div>
http://jsfiddle.net/uLUAT/1166/
I tried different things but I cant fix it. Can you change your data? If your datas total equal 100 there is no problem I think
data: {
labels: ["Actions"],
datasets: [{
label: 'Closed : 50 (65%)',
data: [50],
backgroundColor: [
'rgba(255, 0, 0, 0.5)'
],
borderColor: [
'rgba(255, 0, 0, 1)'
],
borderWidth: 1
}, {
label: 'Delayed : 20 (12%)',
data: [20],
backgroundColor: [
'rgba(0, 0, 255, 0.5)'
],
borderColor: [
'rgba(0, 0, 255, 1)'
],
borderWidth: 1
}, {
label: 'Open : 12 (5%)',
data: [30],
backgroundColor: [
'rgba(0, 255, 0, 0.5)'
],
borderColor: [
'rgba(0, 255, 0, 1)'
],
borderWidth: 1
}]
},
http://jsfiddle.net/uLUAT/1167/ I created a function check out. You dont need to change values any more.
var total = 0;
var value = 0;
for (var i = 0; i < myBarChart.data.datasets.length; i++) {
total += myBarChart.data.datasets[i].data[0]
}
value = (100 - total) / myBarChart.data.datasets.length
for (var i = 0; i < myBarChart.data.datasets.length; i++) {
myBarChart.data.datasets[i].data[0] += value;
}
myBarChart.update();
Related
I looked for a lot of things to add a feature to my chart but
I couldn't find it in the documentation or here,
I would like to add a visual addition of today's date, on the bottom legend for example,
does anyone have any examples or ideas? thank you in advance
new Chart(canvas, {
type: 'line',
data: {
labels: [ <?php echo $txt_labels; ?> ],
datasets: [{
label: 'Réelle',
yAxisID: 'A',
data: [ <?php echo $txt_series1; ?> ],
borderColor: 'rgba(238, 121, 83, 1)',
backgroundColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: "rgba(238, 121, 83, 1)",
pointRadius: 5,
}, {
label: 'Attendue',
yAxisID: 'B',
data: [ <?php echo $txt_series2; ?> ],
borderColor: 'rgba(167, 172, 200, 1)',
backgroundColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: "rgba(167, 172, 200, 1)",
pointRadius: 5,
}]
},
options: {
animation: {
animateScale: true,
animateRotate: true,
duration: 1500,
easing: 'easeInOutSine',
},
scales: {
x:{
grid: {
borderColor: 'rgba(16, 16, 18, 0.5)',
offset: true,
},
},
A: {
type: 'linear',
position: 'left',
grid: {
display: false,
borderColor: 'rgba(16, 16, 18, 0.5)',
},
ticks: {
font: {
size: 14,
},
callback: function(value, index, values) {
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
},
},
B: {
type: 'linear',
position: 'right',
}
},
},
},
}
});
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 have received this piece of code to generate a chart based on data pulled from "data.php". The chart renders fine without any issues. I cannot seem to get it updating each 5 seconds.
I tried auto refreshing the whole page, but this does not seem to be productive, since you will have to scroll back down to the chart.
$(document).ready(function () {
/**
* call the data.php file to fetch the result from db table.
*/
$.ajax({
url: "http://xx.xx.xx.xx/link/going2/data.php",
type: "GET",
success: function (data) {
console.log(data);
var VALUE = {
iface1: [],
iface2: [],
iface3: [],
iface4: [],
iface5: [],
iface6: []
};
var len = data.length;
for (var i = 0; i < len; i++) {
if (data[i].INTERFACE == "iface1") {
VALUE.iface1.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface2") {
VALUE.iface2.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface3") {
VALUE.iface3.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface4") {
VALUE.iface4.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface5") {
VALUE.iface5.push(data[i].VALUE);
} else if (data[i].INTERFACE == "iface6") {
VALUE.iface6.push(data[i].VALUE);
}
}
//get canvas
var t = new Date();
var ctx = $("#line-chartcanvas");
var data = {
labels: [ (Removed to make code shorter)],
datasets: [{
label: "cable-upstream 1/0.0",
data: VALUE.iface1,
backgroundColor: 'rgba(0, 0, 255, 1.0)',
borderColor: 'rgba(0, 0, 255, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/1.0",
data: VALUE.iface2,
backgroundColor: 'rgba(0, 128, 0, 1.0)',
borderColor: 'rgba(0, 128, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/2.0",
data: VALUE.iface3,
backgroundColor: 'rgba(255, 0, 0, 1.0)',
borderColor: 'rgba(255, 0, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/12.0",
data: VALUE.iface4,
backgroundColor: 'rgba(128, 0, 0, 1.0)',
borderColor: 'rgba(128, 0, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/13.0",
data: VALUE.iface5,
backgroundColor: 'rgba(0, 0, 0, 1.0)',
borderColor: 'rgba(0, 0, 0, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, {
label: "cable-upstream 1/14.0",
data: VALUE.iface6,
backgroundColor: 'rgba(128, 0, 128, 1.0)',
borderColor: 'rgba(128, 0, 128, 0.5)',
fill: false,
lineTension: 0,
pointRadius: 2
}, ]
};
var options = {
animation: false,
responsive: true,
title: {
display: true,
position: "top",
text: "Service Group 1",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom"
},
scales: {
yAxes: [{
ticks: {
max: 30,
min: 15,
stepSize: 0.5,
callback: function (value, index, values) {
return value + " dBmV";
}
},
scaleLabel: {
display: true,
labelString: 'Signal to Noise'
}
}]
}
};
var chart = new Chart(ctx, {
type: "line",
data: data,
options: options
});
},
error: function (data) {
console.log(data);
}
});
});
I expect this chart refreshing each 5 seconds (not refreshing the whole page)
I think you want to refresh the chart every 5 second.
so use this code :
window.setInterval(function(){
/// call your function here
}, 5000);
To stop the loop you can use
clearInterval()
please check this link reference
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>