score:3
Accepted answer
this behaviour is fixed in v3 of the lib
var leftdata = {
labels: [0, 1, 2, 3, 4, 5],
datasets: [{
label: "a",
backgroundcolor: 'rgba(0, 0, 255, 0.5)',
data: [12, 19, 3, 5, 1],
xaxisid: "a"
},
{
label: "b",
backgroundcolor: 'rgba(0, 255, 0, 0.5)',
data: [14, 19, 6, 2, 4],
xaxisid: "b"
}
]
};
var rightdata = {
labels: [0, 1, 2, 3, "4", 5], // the #4 being a string is the only difference
datasets: [{
label: "a",
backgroundcolor: 'rgba(0, 0, 255, 0.5)',
data: [12, 19, 3, 5, 1],
xaxisid: "a"
},
{
label: "b",
backgroundcolor: 'rgba(0, 255, 0, 0.5)',
data: [14, 19, 6, 2, 4],
xaxisid: "b"
}
]
};
var options = {
scales: {
a: {
display: false,
barpercentage: 1.25,
ticks: {
max: 4
},
position: 'bottom'
},
b: {
display: false,
stacked: true,
offset: true,
barpercentage: 1.25,
position: 'bottom',
ticks: {
max: 4
}
},
x: {
display: true,
ticks: {
autoskip: false,
max: 5
}
},
y: {
id: "bar-y-axis1",
ticks: {
beginatzero: true
}
}
}
};
var leftctx = document.getelementbyid("topcanvas").getcontext("2d");
new chart(leftctx, {
type: 'bar',
data: leftdata,
options: options
});
var rightctx = document.getelementbyid("bottomcanvas").getcontext("2d");
new chart(rightctx, {
type: 'bar',
data: rightdata,
options: options
});
<div class="grid">
<canvas id="topcanvas"></canvas>
<canvas id="bottomcanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.js" integrity="sha512-opxrgvcthsevdbuzqtplw9s8+99hnbahmxtadxxc61ouu6goii5ku/pzzfqexhxc3hnk8irjkho+t7o4grijcw==" crossorigin="anonymous"></script>
</div>
Source: stackoverflow.com
Related Query
- Why are these 2.9 ChartJS bar charts different?
- chartjs - how to set the order in which the different charts are displayed
- Different color for each bar in a bar chart; ChartJS
- How to modify bar width in Chartjs 2 bar charts
- How do I make line charts overlay over bar charts in chartjs
- Why chart.js charts are not plotting data in Safari (works in Chrome)
- In bar chartjs report zero values are skipped so bars are invalid
- How to retain spacing between bars for two different bar charts in Chart.js 2
- How can I load multiple Chartjs charts with different data on the same page?
- Chartjs tooltip anchor point position on bar charts
- Rounded corners on chartJS v.2 - bar charts (with negative values)
- Why are my two charts repeating the same label?
- Why are the chartjs tooltip labels always showing the first x-axis label?
- Chartjs with Typescript: The types of 'interaction.mode' are incompatible between these types
- When I added a funnel chart to chartjs all the charts are load compressed until resize page
- Chartjs v2.7 - combo chart with time-series (financial) data; bar width's are irregular
- Grouped bar charts each group different level in chart.js
- chartjs display data in one bar line with 3 different data sets in 3 different colors
- Why is chartjs treating these arrays differently?
- Edit styles for axes in ChartJS bar chart, when gridlines are hidden
- Having different colors per bar with angular charts chart.js v2
- Smallest values are invisible in ng2-charts bar charts
- multiple chartjs charts with the same configuration but different data
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- Different color for each bar in a bar graph in ChartJS and VueJS
- Merge two objects with different keys in chartjs bar
- Why the bar are not aligned the y axis
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- ChartJS Line Charts - remove color underneath lines
- Chartjs Bar Chart showing old data when hovering
More Query from same tag
- Barchart reducing space between bars
- ng2-charts update labels and data
- Custom Legend with ChartJS v2.0
- Create a pie chart with chartjs package in R
- Customization of Data Labels in doughnut chart ng2-charts
- Chartjs: How to offset ticks on radarchart?
- Remove all borders from my chart in angular-chart-js
- Chart.js change label color
- Feeding PHP MySQL Call into Charts.js
- How can I set a class to a HTML element which is created by custom tooltip function?
- How to get 2 doughnut charts in one chart (chartjs)
- OffsetWidth / offsetHeight is zero when template loaded by ngRoute
- how do I render PyChart.JS charts in web2py?
- setting QuickCharts color
- how to update chartjs2 option (scale.tick.max)
- Why don't my datasets show up on line graph using Chart.js?
- How to use HTML in custom tooltip in angular charts?
- How to fix the distance between horizontal points (x-axis) in chartJS
- Change color of one value in the x-axis charts.js
- Getting "undefined" trying to create a function
- Unable to display data via Charts.JS
- Javascript and chart.js, how to add euro currency to y label
- Changing style of individual point Chart.js
- Chart js Backgroundimage Scaling
- Angular ChartJS 2.9.4 issue updating chart
- My choice of color is not used in my stacked bar chart
- Passing Global Options to line Chart in 2.1.6/Chart.js
- ChartJS unable to register global plugin
- Use chartjs with rails
- Use Chartjs-Annotation-Plugin without using "import"