score:0
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 (offset) the x positions of the bars from the second dataset.
please have a look at your amended code below.
const offset = 22;
var mychart = new chart(document.getelementbyid('chart'), {
type: 'bar',
plugins: [{
afterupdate: function(chart) {
var dataset = chart.config.data.datasets[1];
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlpointnextx += offset;
model.controlpointpreviousx += offset;
}
}
}],
data: {
labels: ['red', 'blue', 'orange', 'green'],
datasets: [{
label: 'vote share now',
data: [25.5, 22.7, 8.6, 5.5],
backgroundcolor: [
'rgba(250,0,0,0.7)',
'rgba(0,17,255, 0.7)',
'rgba(255,155,0, 0.7)',
'rgba(0,255,9,0.7)'
],
categorypercentage: 0.8,
barpercentage: 0.9,
xaxisid: "now",
}, {
label: 'vote share then',
data: [22.5, 29.7, 10.3, 5.3],
backgroundcolor: [
'rgba(250,0,0,0.2)',
'rgba(0,17,255,0.2)',
'rgba(255,115,0,0.2)',
'rgba(0, 255,9,0.2)'
],
categorypercentage: 0.6,
barpercentage: 0.6,
xaxisid: "then",
}]
},
options: {
responsive: false,
legend: {
onclick: null
},
scales: {
xaxes: [{
id: "now",
gridlines: {
display: false
}
},
{
id: "then",
offset: true,
display: false
}
],
yaxes: [{
ticks: {
min: 0,
max: 50,
stepsize: 10,
callback: function(value, index, values) {
return value + '%';
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="chart" height="200"></canvas>
Source: stackoverflow.com
Related Query
- Chart.js: Creating a Barchart with overlaying and offset Bars
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- How to prevent first/last bars from being cut off in a chart with time scale
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Styling Bars and Lines with Chart.js
- Chart.js Mixed Bar and Line chart with different scales
- Problem for display a chart with Chart.js and Angular
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Creating a grouped and stacked chart in Chart.js
- Can we draw a Line Chart with both solid and dotted line in it?
- Increase padding between legend and chart with react-chartjs-2
- Creating dropdown options with Chart.js using select tag and multiple canvas
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Using chart js options with react-chartjs-2 and typescript
- Trying to load a chart with chart.js, through ajax and php
- Issue while plotting bar chart with custom x-axis with month and year in chart.js
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Dynamic line chart with chart.js and PHP
- How to use JSON data in creating a chart with chartjs?
- Doughnut Chart not displaying data with Chart Js and Backbone js
- how to display multiple sum with chart js and laravel?
- live update ecg chart with python and flask
- Chart.js: Reverse bar chart with regular bars (Bottom to top instead of top to bottom)
- chart js - bar chart with time scale on Y axis in Hours and Minutes
- Bar chart with min height and zero values - ChartJs
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
More Query from same tag
- Gradient color for each bar in a bar graph using ChartJS
- Cant change labels in Chart.js 2.0 Beta
- use navigator clipboard to store image/png from canvas blob
- Chart.js displaying time data
- Chart.js: show tooltip color square only for certain row
- Chartjs doughnut chart with gradient color
- Chart.js updating data
- Chart.JS Time Axis Not Parsing
- create a multi line chart using Chart.js
- ng2 charts on Angular 9 not responsive
- Vue.js - this.<value>.<value> is undefined
- Chart.plugins.register beforeDraw does not work when using ChartsJS 3.x
- Chart.js how set equal step size depending on actual data (xaxis)?
- Missing Tooltip for some data points using chartjs
- Chart.js How to sum the values in a pie chart and display them in the header
- Chart.js page is zooming out everytime we change to a different graph while using a browser on with IOS El Capitan or latest iPad version
- Using epoch as time series on x axis in react-chartjs-2 not showing correct date
- Can't use a chart module with angularjs
- Loop through each tooltips to add different TimeStamps
- chart.js update is not a function
- Show dynamic data with dynamic colours in chartjs
- Getting charts.js to read from Google Sheet JSON data
- How to have custom colors in ng2-charts and chart.js according to data?
- functional component not re-rendering after setState update hook
- Adding data to Chart.js line graph from array
- Dynamically created linechart holds previous data value
- Generate PDF from HTML page made with Bootstrap and ChartJS in Laravel
- Chart JS Line Graph multitooltipkey background color issue
- Bar Graph, chart.js PHP Will Not Load
- ChartJs Skip few category, possible?