score:1
Accepted answer
yes, you can use floating bars together with faking the scales, you can just use negative numbers for 1 of the 2 datasets and just invert all those numbers with all the callbacks:
var options = {
type: 'bar',
data: {
labels: ["0-10", "10-20", "20-30"],
datasets: [{
label: 'girls',
data: [
[
0,
12
],
[
0,
19
],
[
0,
3
]
],
backgroundcolor: 'pink',
barpercentage: 1,
categorypercentage: 1,
bordercolor: 'black',
borderwidth: 1
},
{
label: 'boys',
data: [
[
0, -7
],
[
0, -11
],
[
0, -5
]
],
backgroundcolor: 'lightblue',
barpercentage: 1,
categorypercentage: 1,
bordercolor: 'black',
borderwidth: 1,
borderskipped: 'none' // leave this line out to remove middle border at 0 line
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttitem) => (math.abs(ttitem.parsed.x)) // inverse negatives to positive numbers
}
}
},
indexaxis: 'y',
scales: {
y: {
stacked: true,
grid: {
display: false
}
},
x: {
min: -20,
max: 20,
ticks: {
callback: (val) => (math.abs(val)) // inverrt negatives to positive numbers
}
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How to add ChartJS code in Html2Pdf to view image
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- ChartJS have xAxes labels match data source
- Updating Chartjs to 2.5 with custom code
- Age pyramid chart using chart.js
- Age pyramid: 3.5.1 chartjs
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
- ChartJS 2.0 differences in code help needed
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- 'require is not defined' error when attempting to use chartjs in javascript code
- How to run Chart.js samples using source code
- Code for Chartjs Typescript definition file
- Dynamically update values of a chartjs chart
- Different color for each bar in a bar chart; ChartJS
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Skip decimal points on y-axis in chartJS
- How to set ChartJS Y axis title?
- Chartjs Bar Chart showing old data when hovering
- Chartjs change grid line color
- Chart area background color chartjs
- Custom Legend with ChartJS v2.0
- Chartjs Tooltip Line Breaks
- Is it possible in chartjs to hide certain dataset legends?
- Chartjs v2.0: stacked bar chart
- ChartJS - Different color per data point
- Chartjs random colors for each part of pie chart with data dynamically from database
More Query from same tag
- How do you add custom text to tooltips in charts.js
- How to pass dynamic values as objects inside data in line chart?
- Adding line over stacked line chart with ChartJS
- Uncaught TypeError: [Array].filter is not a function
- Tooltip backgroundColor depending on chart color ChartJS
- Uncaught type error: mychart.update is not a function
- Format array output to be readable by chartjs in Laravel
- Bar Color In Chart JS
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How to fill background colors on line-charts?
- Tooltips displaying "rgb(0,0,0)" instead of label value on bar chart
- Uncaught TypeError When Trying to get Canvas
- Line graph with linear timescale in Chart.js
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- Chart.js - doughnut show active segment tooltip (on click of external button)
- How to pass a variable to the dataset for a graph in chart.js?
- Is it possible to make chartjs charts scrollable?
- how to hide tick labels on chartjs/vue-chartjs
- Chart point hover error
- chart.js stacked graph that overlaps
- How to remove Chart.js legend
- How can i loop some specific key in each index json data and put it in dataset: data ? (chart.js)
- How to create logarithmic scale in chart.js with normal numbers?
- ChartJS customize left and bottom axe border
- Chart.js : How I change the x axes ticks labels alignment in any sizes?
- Angular-Charts bar chart does not update when I change the data, series, labels
- Installing chartjs in project without npm, bower or CDN
- how can i use chartjs-plugin-annotation?
- How to skip labels on x-axes?
- ChartJs is not working in angular 4 with no errors