score:33
Accepted answer
Quick Solution :
Vertical Stacked Bar Chart
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Standing costs', 'Running costs'], // responsible for how many bars are gonna show on the chart
// create 12 datasets, since we have 12 items
// data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
// put 0, if there is no data for the particular bar
datasets: [{
label: 'Washing and cleaning',
data: [0, 8],
backgroundColor: '#22aa99'
}, {
label: 'Traffic tickets',
data: [0, 2],
backgroundColor: '#994499'
}, {
label: 'Tolls',
data: [0, 1],
backgroundColor: '#316395'
}, {
label: 'Parking',
data: [5, 2],
backgroundColor: '#b82e2e'
}, {
label: 'Car tax',
data: [0, 1],
backgroundColor: '#66aa00'
}, {
label: 'Repairs and improvements',
data: [0, 2],
backgroundColor: '#dd4477'
}, {
label: 'Maintenance',
data: [6, 1],
backgroundColor: '#0099c6'
}, {
label: 'Inspection',
data: [0, 2],
backgroundColor: '#990099'
}, {
label: 'Loan interest',
data: [0, 3],
backgroundColor: '#109618'
}, {
label: 'Depreciation of the vehicle',
data: [0, 2],
backgroundColor: '#109618'
}, {
label: 'Fuel',
data: [0, 1],
backgroundColor: '#dc3912'
}, {
label: 'Insurance and Breakdown cover',
data: [4, 0],
backgroundColor: '#3366cc'
}]
},
options: {
responsive: false,
legend: {
position: 'right' // place legend on the right side of chart
},
scales: {
xAxes: [{
stacked: true // this should be set to make the bars stacked
}],
yAxes: [{
stacked: true // this also..
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>
apology for not giving explanation.
score:-1
updated for v3
<div style="height: 500px">
<canvas id="chart_1" ></canvas>
</div>
<script>
chart = new Chart(document.getElementById('chart_1').getContext('2d'), {
type: 'bar',
data: {
labels: ["One", "Two", "Three"],
datasets: [{
label: 'Blue',
data: [100, 110, 120],
backgroundColor: 'blue',
},
{
label: 'Red',
data: [30, 20, 10],
backgroundColor: 'red',
},
]
},
options: {
plugins: {
title: {
display: true,
text: 'Example',
font: {
size: 14
}
},
},
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
</script>
Source: stackoverflow.com
Related Query
- Vertical stacked bar chart with chart.js
- Horizontal stacked bar chart with chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to display inline values in a stacked bar chart with Chart.js?
- Stacked horizontal bar chart along total count with chart.js
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Stacked bar chart with rounded corner of bar using Chart.js
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- Create stacked bar chart with a single dataset per stack
- How do I create a stacked horizontal bar chart with Chart.js in React?
- Stacked bar chart with chartjs with included values
- Unable to create Stacked Grouped Bar Chart with chart.js / react-chartjs-2 in React
- Vertical stacked bar chart using SharePoint List
- How can I create a stacked bar chart with Charts.JS that displays relative rather than absolute values?
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
- Chart.js Draw a Stacked Bar Chart with Limit Line
- ChartJS 2.7.3 stacked bar chart with overlap
- Chartjs v3 overlap stacked bar chart with groups
- Draw stacked horizontal bar chart with Average line using ChartJS
- Vue-chartjs with axios for stacked bar chart
- Chart Js Stacked Bar Chart with Multiple levels or categories
- vue-chartjs with chartkick vertical bar chart
- Stacked Bar Chart With Line Chart In Charts.js
- Bar chart with vertical lines in each bar
- CharJS : Is it possible to display stacked bar chart with positive scale on both sides of 0 index
- Chartjs v2.0: stacked bar chart
- Click event on stacked bar chart - ChartJs
- How to create stacked bar chart using react-chartjs-2?
- Chart.js Mixed Bar and Line chart with different scales
More Query from same tag
- Chart.js line graph doesn't show up most of the time
- Create PDF with mpdf and chart.js
- How to check if HTML5 canvas element contains something in given coordinate region using javascript
- Shorten number labels in Charts.js
- Chart.js stacked bar chart text on top of the stacked bars
- Chart.js Doughnut Chart Rendering Wrong
- how to not repeat code while creating multiple charts in chart js
- How to convert an array of strings to float in Javascript
- Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart
- Chart.js not showing data until I click on the label 3 times
- How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS
- How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+
- How to show data values or index labels in ChartJs (Latest Version)
- Piechart doesn't show up in Canvas
- Can I bind an onclick event and edit a point in chartjs
- Extending Line Chart with custom line
- How to draw border all the way around bar element
- Chart.js nuget Package with angularJS
- Chart.Js - Background Bar in Chart Bar
- 'Chart.js' time chart not displaying properly
- Javascript How to give color using conditional statement based on json array state value
- Chart.js: Strikethrough tick labels
- Show chart.js animation only when user scroll on the specific DIV
- Facing difficulty in opening a dialog from onClick event on a pie chart in angular 8 (using chart.js)
- Using data from model in Chart.js MVC c#
- How to pass dynamic string as dataset in charts.js
- Chartjs + DataLabelPlugin: Suddenly data labels are shown in every chart even without the plugin?
- Difficulty in using php json_encode data received in javascript to display graph using chart.js library
- My Chartjs is not updating after setstate full code attached Reactjs Update
- ChartJS - How to change color of some data points in graph