score:1
Accepted answer
the plugin core api offers a range of hooks that may be used for performing custom code. you can use the afterupdate
hook to shift the bars of individual datasets by the desired number of pixels as follows:
afterupdate: function(chart) {
let datasets = chart.config.data.datasets;
for (let ids = 1; ids < datasets.length; ids++) {
let dataset = datasets[ids];
for (var i = 0; i < dataset._meta[0].data.length; i++) {
let model = dataset._meta[0].data[i]._model;
model.x += ids * offset;
model.controlpointnextx += ids * offset;
model.controlpointpreviousx += ids * offset;
}
}
}
please take a look at below runnable code snippet and see how it works.
const offset = 12;
new chart('mychart', {
type: 'bar',
plugins: [{
afterupdate: function(chart) {
let datasets = chart.config.data.datasets;
for (let ids = 1; ids < datasets.length; ids++) {
let dataset = datasets[ids];
for (var i = 0; i < dataset._meta[0].data.length; i++) {
let model = dataset._meta[0].data[i]._model;
model.x += ids * offset;
model.controlpointnextx += ids * offset;
model.controlpointpreviousx += ids * offset;
}
}
}
}],
data: {
labels: ["a"],
datasets: [{
label: 'x',
backgroundcolor: 'orange',
borderwidth: 1,
data: [5],
xaxisid: "bar-x-axis1",
barthickness: 30,
},
{
label: 'y',
backgroundcolor: 'red',
data: [10],
xaxisid: "bar-x-axis2",
barthickness: 30,
},
{
label: 'z',
backgroundcolor: 'lightblue',
data: [15],
xaxisid: "bar-x-axis3",
barthickness: 30,
}
]
},
options: {
legend: {
display: false
},
scales: {
xaxes: [{
id: "bar-x-axis3",
display: false
},
{
id: "bar-x-axis2",
offset: true,
display: false
},
{
id: "bar-x-axis1",
offset: true,
ticks: {
display: false
}
}
],
yaxes: [{
id: "bar-y-axis1",
ticks: {
beginatzero: true,
stepsize: 5
}
}]
}
}
});
canvas {
max-width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart" height="150"></canvas>
update
please also check this answer that provides a slightly improved solution.
Source: stackoverflow.com
Related Query
- Horizontal overlapping of bars, not whole graph
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- Stacked Horizontal Bars not in align Chart JS
- Charts.js graph not scaling to canvas size
- Chart.JS Mixed Chart - Bars Not Showing
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Wkhtmltopdf does not render Chart.JS 2.5.0 graph
- Chart.js Bar graph will not start at zero as minimum value
- Last value not showing in bar graph of charts.js-library
- How to display value labels above graph bars using chart.js
- Chartjs Graph is not showing in colorbox
- ChartJS / MomentJS - Unable to remove deprecation warning. Graph not showing in firefox/opera
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Vertical spacing in horizontal ChartJS Bar Graph
- Chartjs (Non Vue) Not Rendering Graph Chart inside V-if/V-show
- Chart.js Ionic 2 Angular2: Background color of bar graph not changing
- Some bars of the bar graph are disappearing from Chart.js
- Charts.js graph not displaying
- Angular2 and ng2-charts does not display any graph
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- Bootstrap modal not working with chartjs line graph
- Showing 'undefined%' in the graph if data does not exist
- ChartJS Horizontal bars barely visible with 50 records on the Y axis
- How to hide / not draw bars with 0 / null / undefined values?
- Vue-Chartjs not rendering graph
- Chart.js not showing value on top of bars
- Chart.js annotation horizontal line on double y-axis graph
- Receiving json data from a server to display a chart.js graph not working
- Alternating bars in bar chart in chart.js are not labelled
More Query from same tag
- No rendered annotation line on Line Chart
- Is it possible to create a canvas to extract image data without actually rendering the canvas?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Angular Chart Js legends click event not working
- Create IF to change chart.js bar color
- Rotating a chart.js pie chart with two datapoints to align both sectors on horizontal axis
- how to hide 0 value on Yaxis in Chart.js with negative values
- why is the background black when with Chartjs export to a image
- Chart js space above bar graph
- Regarding stacked chart in chart.js
- Is it posssible to create a Line-Chart with only 2 values? - Chart.js
- chart.js Radar shows 0 when value is 12
- ChartJS - Scale x axis labels from single days to multiple months
- Inline plugin doesn't work
- Is there a way to implement chart-js-plugin-waterfall as a react component
- how to always show label in chartjs without mouseover?
- Chart.js Radar Chart How to Remove Outer Labels
- How to show percentage (%) in chart js
- Hide or show two datasets with one click event of legend in chart.js
- Wrong tootip in chartjs
- ng2-charts - bar chart, showing only one color
- Chart JS flicker when new data is added to chart (Vue)
- How do I change the appearance of tooltips with mode: index in Chart.js
- How can I do a sensitivity range with chart.js?
- Chart.js customization, two Y-Axis overlay, chart area padding, odd tick padding
- Chart Js Line chart with fill on click with full information of its legend text
- Chart.js 2 - label overlapping
- Making chartjs scrollable on the x-axis
- Creating a stacked budget Vs Actual chart
- Dynamically loaded chart data not showing Chartjs React