score:3
Accepted answer
in order to achieve a stacked bar chart with chart js you can use this code http://codepen.io/anon/pen/ozzyJy. I have replaced the second data values array with some bigger values in order to illustrate the stacked bars, but it will work fine with any values:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
datasets: [{
backgroundColor: 'rgba(97, 188, 109, 0.2)',
borderColor: 'rgba(97, 188, 109, .8)',
data: [7000, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
}, {
backgroundColor: 'rgba(236, 107, 86, 0.2)',
borderColor: 'rgba(236, 107, 86, .8)',
data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
//data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
}]
},
options: {
tooltips: {
enabled: false
},
animation: {
duration: 0,
onComplete: function() {
if (this.data.datasets.length === 2) {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
var firstDataSet = this.data.datasets[0];
var secondDataSet = this.data.datasets[1];
if (firstDataSet.length === secondDataSet.length) {
for (var i = 0; i < firstDataSet.data.length; i++) {
var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
var total = firstDataSet.data[i] + secondDataSet.data[i];
if (firstDataSet.data[i] >= secondDataSet.data[i]) {
ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
}else{
ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
}
}
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true
}],
xAxes: [{
stacked: true,
}]
}
}
});
Source: stackoverflow.com
Related Query
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Chart.js How can I embed additional values to each data point in radar chart
- how to write labels along with data on top and bottom of each stack in bar chart
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- How to show data values in top of bar chart and line chart in chart.js 3
- How do I get a different label for each bar in a bar chart in ChartJS?
- How to show the chartjs bar chart data values labels as text?
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How to add data labels in each bar in stacked bar chart in chart.js?
- How can I make two of my lines in Chart JS thicker
- How to display inline values in a stacked bar chart with Chart.js?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to set single color on each bar in angular chart js
- How can I create custom tooltips for each data point in a graph?
- How to commaize the data values provided to a chart in Chart.JS?
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- How to use set the color for each bar in a bar chart using chartjs?
- How can I have different values for the chart and the tooltip in chart.js?
- How do I get a chart.js chart to display data in a Node/React web application?
- Chart.JS: How can I only display data labels when the bar width is big enough for the text?
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- Chart JS how to display an array of data objects as bar chart
- How to set X coordinate for each bar with react chart js 2?
More Query from same tag
- How can I pass the data into the chartjs label?
- Create stacked bar chart with a single dataset per stack
- flask altering python list
- Chartjs Percents in Legend
- Template variable injection in JS script
- Chartjs display multiple info with different units in label
- why tooltip appears wrong in my chart JS?
- Placing JavaScript content in Bootstrap Popover
- interactive Button doesn't hide the chart as I intended
- How to set lower limit for the highest value being displayed on Y Axis?
- ChartJS - How can I skip certain minutes on the X-Axis
- Chart.js not showing in my view
- Dynamic rendering of chart with chartjs
- Chart.js 2.0 - vertical lines
- Can I make Y axis begin at specific value in ChartJS?
- Android WebView HTML5 canvas error
- React Chartjs - Update Chart on interval
- How to load Json data onto a Charts.js chart
- Chart.js with 2 y-axis
- Is it possible to pot a line chart of date vs time in ChartJS?
- Chartjs - resize an image positioned in a column
- Chart.js how to create chart wirhout y-axis for two data sets
- ChartJs: HorizontalBar Missing Background Colours
- Overlap horizontalBar graps using ChartJS
- Charts.js how to have 2 different size y-axis
- Implementing Data Decimation in vue chartjs
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- How do you set pie chart colors in angular-chart.js
- Chart isn't updating with Response data (Chart.js 3.2.1, ng2-charts 3.0.0-beta.9)
- Chart.JS format date in label