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 can I hide points on chart?
- Set custom colours for tooltip squares Chart.js
- chart.js won't display the chart in IE
- How to create dynamic D3 tickFormat in dc charts
- Angularjs - Charts.js: Same chart element doesn't redraw on other view
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- Chart JS - Grid colors and gradient fill not showing
- Dotted Line in ChartJS
- Querying mongoDB for some chart data - my pipeline seems convoluted
- Change ChartJs axis title dynamically
- How to set static value in y-axis in chart.js?
- Show multiple charts at HTML page?
- Uncaught Error: [$injector:modulerr] Error: [$injector:nomod] Module 'chart.js' is not available
- how get data from given string in javascript?
- Chart.js not showing/skipping labels
- How to iterate over array elements inside objects in javascript
- Javascript - How to Transform MiB to GB
- canvas fill text vanishes when hovering over chartjs pie chart
- How do I run Chart.js with Angular 10 SSR / universal?
- How to improve PDF rasterization quality in PhantomJS?
- Is there any way I can customize my chartjs
- Force two Chart.js doughnut charts with legends to same size in Bootstrap columns
- Add multiple lines as Y axis title in chartJs
- Zoom is very slow in ChartJS Zoom Plugin
- ChartJS on NodeJS: error Chart is not defined
- Destroy chart.js bar graph to redraw other graph in same <canvas>
- How can I change the legend label without affecting my tooltip label?
- Chartjs: make square legends
- chart.js npm module not working
- Multiple instances of vue-chartjs