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
- In react hooks, how can i pass the filtered values to the chart?
- How can I rotate a pie chart in charts.js?
- Angular Radar Chart :OnClick event of label or sector
- How to label x-Axis in Chart.js by days?
- Access MVC Model property that is already JSON in javascript
- Auto center ticks and values on graph when there's only one with chart.js
- Chartjs v7.0 with plugin zoom, strange effect when use "drag" mode.
- How to have ticks on x axis in 15 min increments on chartJS?
- chart.js aspect ratio not square
- Error: [$injector:unpr] Unknown provider: chart.jsProvider
- How to apply data dynamically on initialisation for chart.js in angular?
- Cannot read properties of undefined with react-chartjs-2 and chart js problem
- Chartjs 2 scaling lots of data points
- ChartJS is not rendered
- How do I group legend entries using Chartjs?
- How to apply each color to each dataset
- Using Chart.js with Gatsby markdown
- Chart.js styling questions
- Price history with chart js
- Pushing data from json to Chart.js labels and data
- Generate bar chart using chart.js and associative array
- angular chart js set fill color of bar chart
- How to write a query to get the number of times a choice is selected by users
- Render Chart.js on backend side ASP.NET
- Javascript chart.js data object/array
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- How to fetch data from Json file on charts(bar-chart/pie chart etc) in angular?
- Rest api / json error while using it with react chartjs
- Apply/Register conflicting plugins to different charts
- Chart.js, change color of specific ticks