score:6
Accepted answer
This plot type is called "stacked bar" and is included in the Chart.js samples. The documentation is quite clear.
Here's a working example:
new Chart(document.getElementById("chart"), {
type: "horizontalBar",
data: {
labels: ["A", "B"],
datasets: [{
data: [1, 4],
backgroundColor: "#0033a0"
},
{
data: [3, 1],
backgroundColor: "#1a79bf"
},
{
data: [2, 2],
backgroundColor: "#b2b2b2"
}
]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- Horizontal bar with multiple sections in ChartJs
- ChartJS: Horizontal Bar with multiple datasets not showing Bars
- Chartjs 3.x - How to duplicate X axis on both sides of horizontal bar chart with only 1 dataset?
- ChartJS horizontal bar with numbers on both scales
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- Draw stacked horizontal bar chart with Average line using ChartJS
- How to make multiple horizontal bar chartjs
- ChartJS - Issues with positioning and viewing various components of horizontal bar
- Horizontal stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Show bar with zero value in ChartJs v2
- ChartJS - Donut charts with multiple rings
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Chart.js - Draw bar chart with multiple labels
- ChartJS bar chart with legend which corresponds to each bar
- Chartjs - data format for bar chart with multi-level x-axes
- Create a rounded bar graph with Angular and chartJS
- How to draw Horizontal line on Bar Chart Chartjs
- Stacked horizontal bar chart along total count with chart.js
- Multiple stacked bar chart using ChartJs
- Chartjs drill down issue with multiple Y-Axis Bar/Line graph
- Vertical spacing in horizontal ChartJS Bar Graph
- How to remove bars for those bars with zero value in Chartjs bar chart?
- Horizontal Stacked Bar with Gaps
- Group Chart with multiple layers in ChartJS
- Chartjs with multiple y axes and different scales
- Angular-chart / line chart with multiple horizontal lines (margins)
- Remove padding from chartJs horizontal bar chart
- Horizontal bar with two yaxes chart js
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
More Query from same tag
- How do i have to implement my code to get correct json?
- pie chart in php with mysql data using chart.js
- How to create stacked bar chart using react-chartjs-2?
- How to set ChartJS animation speed?
- Updating in chart.js
- Charts.js graph not displaying
- How can I user microseconds in ChartJs?
- How to provide empty values for Chart.js data?
- Problem with primeNG chart: Module not found: Error: Can't resolve 'chart.js/auto'
- JSON data in Chart.js is splitting values
- Why is the child component updating but not re-render Reactjs
- Chart.js How to make a sample math axis?
- Chartjs: get the label title on the radar's chart tooltip
- PHP render stacked area chart of JSON dataset
- Chartjs Percents in Legend
- Chartjs 2 - Stacked bar with marker on top
- Having legends inside the Chart.js canvas
- How can I give the automatically generated y-axis values on bar charts in Chart.JS commas?
- Problem adding name to X-axis for a chart
- Chartjs and dynamic data arrays
- Combine\Merge Same Label in Pie Chart
- Skip dates with no values in chart js
- Object list into chart labels not working
- ChartJS vector maps
- How to use set the color for each bar in a bar chart using chartjs?
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- How to make lines in line charts from ng2-charts straight lines?
- How do I make my Type:Time to work with my Line Chart?
- Loading Laravel Chart consoletvs/charts:7.*
- react testing library: can't acquire context from the given item