score:0
You can do this, it will be displayed as a tooltip,
ctrl.socialChart = {
options : {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
},
type: 'StackedBar',
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data : [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
]
}
score:1
You can show numbers in each bar of stacked bar chart by adding this code in your options function
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.textAlign = 'center';
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
Source: stackoverflow.com
Related Query
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- How to set single color on each bar in angular chart js
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- how to show only each 15th x-labels in line chart chart.js in angular 6?
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to set different colors in each stacked bar chart cell?
- How to create stacked bar chart using react-chartjs-2?
- How to display inline values in a stacked bar chart with Chart.js?
- PrimeNg bar chart how to show a label for the y-axis
- Show labels on each sector to polar chart using angular js chart
- How to show data values in top of bar chart and line chart in chart.js 3
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Angular chart how to show the legend data value by default along with legend name
- How to show percentage (%) using chartjs-plugin-labels ( Pie chart ) in angular 2/8
- How to show gradient vertically on chart js grouped bar chart?
- How to show stacked and unstacked bar graphs together in Chart.js
- How to show different product name for every bar in chart js
- Chart.js: How to get x-axis labels to show on top of bars in bar chart
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- How to use set the color for each bar in a bar chart using chartjs?
- How do I create a stacked horizontal bar chart with Chart.js in React?
- How to set X coordinate for each bar with react chart js 2?
- 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 show labels and value in both on bar chart
- How to create a stacked donut chart in Angular 5
- how to show bar value on the top of each bar in chartjs
- How can I create a stacked bar chart with Charts.JS that displays relative rather than absolute values?
- 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?
- ChartJs - stacked bar chart with groups - how to create second x-axis with stack id
More Query from same tag
- C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
- Chartjs Exporting ImageExports Empty Dark Image
- Chart.js - is there a way to extend an existing scale?
- Bind Angular FormGroup to Chartjs data
- How to call a typescript arrow function and a javascript function in the same event
- "Process is not defined" with react-chartjs-2 CDN
- How to bind touchmove in chartjs canvas?
- How to reload a jQuery element when a button is pressed
- Chart.js remove gridline
- Chart.js multiple columns of data for the same label
- how to change the Y-axis values from float number to integer in chartjs?
- Chart.js How can I embed additional values to each data point in radar chart
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- .destroy() generating error 'window.myChart.destroy()' is not a function
- Property 'elements' does not exist on type 'typeof Chart'
- Passing JSON data from PHP array into ChartJS
- How to change x-Axes label position in Chart.js
- Chart.Js - Background Bar in Chart Bar
- How to use same backgroundcolors out of an array to unknown data in chartjs?
- Grouping by month with series of epoch timestamps in Chart.js
- chartjs chart.update() function not rendering lines in foreground
- Chartjs and dynamic data arrays
- core.js:4197 ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
- chart js showing different width of bar
- Automatic resize of chart - AngularChartJS
- Using Chart.js with SvelteKit
- React and chart.js with json
- Dynamically update values of a chartjs chart
- Ionic/Chart.js - Cannot read property 'nativeElement' of undefined
- How can i add a calculated value on top of the bars in Chart.js?