score:8
Accepted answer
You can set options that will apply to:
all labels in the chart:
options.plugins.datalabels.*
only a single dataset:
dataset.datalabels.*
// Label formatter function
const formatter = (value, ctx) => {
const otherDatasetIndex = ctx.datasetIndex === 0 ? 1 : 0;
const total =
ctx.chart.data.datasets[otherDatasetIndex].data[ctx.dataIndex] + value;
return `${(value / total * 100).toFixed(0)}%`;
};
const data = [{
// stack: 'test',
label: "New",
backgroundColor: "#1d3f74",
data: [6310, 5742, 4044, 5564],
// Change options only for labels of THIS DATASET
datalabels: {
color: "white",
formatter: formatter
}
},
{
// stack: 'test',
label: "Repeat",
backgroundColor: "#6c92c8",
data: [11542, 12400, 12510, 11450],
// Change options only for labels of THIS DATASET
datalabels: {
color: "yellow",
formatter: formatter
}
}
];
const options = {
maintainAspectRatio: false,
spanGaps: false,
responsive: true,
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#fff",
boxWidth: 14,
fontFamily: "proximanova"
}
},
tooltips: {
mode: "label",
callbacks: {
label: function(tooltipItem, data) {
const type = data.datasets[tooltipItem.datasetIndex].label;
const value =
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
let total = 0;
for (let i = 0; i < data.datasets.length; i++)
total += data.datasets[i].data[tooltipItem.index];
if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
return (
type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "1,")
);
} else {
return [
type +
" : " +
value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, "1,"),
"Overall : " + total
];
}
}
}
},
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: "#white",
align: "center"
}
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false
},
ticks: {
fontColor: "#fff"
}
},
{
type: 'category',
offset: true,
position: 'top',
ticks: {
fontColor: "#fff",
callback: function(value, index, values) {
return data[0].data[index] + data[1].data[index]
}
}
}
],
yAxes: [{
stacked: true,
display: false,
ticks: {
fontColor: "#fff"
}
}]
}
};
const ctx = document.getElementById("mychart").getContext("2d");
new Chart(ctx, {
type: "bar",
data: {
labels: ["Jun", "July", "Aug", "Sept"],
datasets: data
},
options: options
});
body {
background: #20262e;
font-family: Helvetica;
padding-top: 50px;
}
#mychart {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="mychart"></canvas>
Source: stackoverflow.com
Related Query
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Stacked horizontal bar chart along total count with chart.js
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines
- chart.js 3 stacked bar chart - tooltip showing for zero values
- ChartJS: Is this horizontal stacked bar and line graph multiaxis chart even possible?
- Chartjs Bar Chart showing old data when hovering
- Chartjs v2.0: stacked bar chart
- Horizontal stacked bar chart with chart.js
- Vertical stacked bar chart with chart.js
- Chart.js: bar chart first bar and last bar not displaying in full
- Click event on stacked bar chart - ChartJs
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- Chart.js Mixed Bar and Line chart with different scales
- Chart.js bar chart : Grid color and hide label
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to display inline values in a stacked bar chart with Chart.js?
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Line chart is showing under bar in combochart in chartjs
- Creating a grouped and stacked chart in Chart.js
- Remove the label and show only value in tooltips of a bar chart
- Stacked bar chart results in misaligned bars
- Multiple stacked bar chart using ChartJs
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- Add a custom label to the top or bottom of a stacked bar chart
- How to show data values in top of bar chart and line chart in chart.js 3
- How can I datalabels and Sum display in the same time on a stacked bar
More Query from same tag
- Adding options to vue-chartjs seems not working
- Add data to line chart js dynamically with multiple lines
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- Chart does not display on webpage in Django app (with Chart.js)
- Animate datasets separately
- How to Remove Unnecessary Spaces around a semi-Doughnut Chart.js Chart
- Why are the chartjs tooltip labels always showing the first x-axis label?
- Building a 24h visualisation with chartjs
- 'require is not defined' error when attempting to use chartjs in javascript code
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- Adding data to Chart.js line graph from array
- Update/re-render Charts.js in Angular 4
- How to Display Chart.js line-chart from a MVC Controller
- How can I modify category labels font size in Chart.JS V2?
- Charts.js (2.9.4) Gridlines not displaying under Line Graph
- Display labels on bar chart using Chart.js
- Chart.js 2 - Axis Layer Padding
- Chart JS: is possible mix Scatter and bar chart in Chart JS?
- Chart js - Line chart cuts border for lines in boundaries
- Chartjs initial animation want to change from left to right (default it is bottom to top)
- angular-chart js time on x Axis is not comes in fraction
- Remove chartjs pie chart highlight on hover
- Chart.js label and point getting cutoff on the right
- Create a ChartJS with 2 database tables
- how to label axis within radar chart with chart.js
- X-axis of Chart.js not taking type : 'time'
- ChartJs - Round borders on a doughnut chart with multiple datasets
- Unix Timestamp Chart.js with PHP echo
- JavaScript array value to chart.js graph as stacked graph
- Bar Color In Chart JS