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
- Chartjs with multiple y axes and different scales
- Converting JSON data into Chart.js array from strings
- how to use alpha vantage api in Instead list in chartjs?
- Convert FirestoreCollection into an array?
- Chart to update from a drop down selection
- Connect the dot vertically instead of horizontally on Line Chart
- graph of an equation animated javascript (crash game)
- Javascript in wordpress causes SyntaxError
- How to add percentage after value data in chart
- Chart.js canvas keeps shifting upwards if I add things below it? (Angular - Chart.JS - NG2Charts)
- How to add an offset to a dataset in Chart js
- How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?
- Handle X-axis label position in chart js
- Chart.js, set a max value
- How to pass a chart.js chart data object in json from a controller in asp.net mvc
- Chart.js margins
- JS node chart from SQL Server not updated
- How to display value of only one datapoint in line chart
- Vertical Line chart with ChartJS
- Having trouble fetching data from database for chart in ASP .NET Core
- I wanna make this chart using chartjs In reactjs
- How to create multiple series on dx-Chartjs
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- How to write better code in es6 for formatting an object with array values
- how to use chart.js with react Hook?
- How to skip x Axes labels in ChartJS
- Chart JS show multiple data points for the same label
- dynamically fill a json variable
- How to use PrimeNg Chart of Width and Height?
- Single Point Curve Chart.js