score:3
Accepted answer
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>
Source: stackoverflow.com
Related Query
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- Stacked bar chart results in misaligned bars
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- Unable to create Stacked Grouped Bar Chart with chart.js / react-chartjs-2 in React
- ChartJS: Grouped Stacked Bar Chart not Grouping
- How to prevent empty bars from taking up width in Chart.js bar chart
- Chart.js stacked bar chart text on top of the stacked bars
- chartjs add dots to bars in grouped bar chart
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
- chartJS Horizontal Bar - Hide Stacked Bars But Still Show In Tooltip
- Chartjs v2.0: stacked bar chart
- Horizontal stacked bar chart with chart.js
- Chart.js Bar Chart - how to chart bars from 0
- Vertical stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Click event on stacked bar chart - ChartJs
- ChartJS add tooltip to a grouped bar chart
- How to create stacked bar chart using react-chartjs-2?
- Chart.js bar chart : Grid color and hide label
- How to display inline values in a stacked bar chart with Chart.js?
- ChartJs bar chart - keep bars left instead of equally spread across the width
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Creating a grouped and stacked chart in Chart.js
- Showing Percentage and Total In stacked Bar Chart of chart.js
- How to have solid colored bars in angular-chart bar chart
- In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
- Stacked horizontal bar chart along total count with chart.js
- Multiple stacked bar chart using ChartJs
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- How to make bar chart animation where all bars grow at the same speed?
More Query from same tag
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How using charts.js with JSON?
- Chartjs bar-chart does not render when values are equal
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- how to show labels in laravel charts when the name of the label is on another table?
- chart.JS i want to put different color for each Y axis value grid line color
- Change the graph from 1 Day to 15 mins when it is being loaded for the 1st time in ChartIQ
- call Column that is complex in query
- ChartJS TypeError: document.getElementById(...).getContext is not a function
- ChartJS distinguish clicks between chart area, dataset and legend
- Add chart using chart.js in codeigniter
- Chart.js Tooltip Information
- Chart is not populating when getting the data from AJAX call
- django + chart.js: page language switch button mess up the charts. What?
- Chart.js v3 after using of zoom plugin instance persist in memory
- chart.js line chart and "correct" spacing between points? (i.e. horizontal position based on percent of width, not fixed)
- Chart.js - draw horizontal line based on a certain y-value
- How to create a linechart with Chart.JS (not filled)
- Moving point to clicked point in ChartJS (radarchart)
- Frontend and backend for chart using chartjs, mongodb, and controller
- dynamically update the scale type of chartjs graph
- Make the X-Axis labels in chart.js increment by a certain scale
- Prevent label of another data from being toggled whenever a label from one data is toggled
- How to export Chart.js chart using toBase64Image, but with no transparency?
- Unable to change y-axis value dynamically based on data for Stacked bar chart in reactjs
- Removing labels from chart.js with a media query (or change option value)
- Add images inside bar chart in chart.js
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Chart.js - Uncaught ReferenceError: chart is not defined
- Chartjs: Double x axis not having the same gridline