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
- Center point labels between ticks (Polar Area Chart JS)
- How to retrieve data from mysql to chart.js
- How do I run Chart.js with Angular 10 SSR / universal?
- Chartjs does not render chart when set responsive option to true
- Using Chart.js, how do I avoid having tooltips overlap?
- json_encode is not working (anymore)
- ChatJS 2.8.0 min/max axis issue and labels on the top
- Chart js show data on hovering legend
- Hide/disable tootlip on specific graph values
- how to display labels at top of charts(chart.js)
- donut chart JS/Jquery that allows HTML tags in its label?
- chart.js in mvc graph are not show
- How to set a locale for Chart.js date labels?
- Switching between Charts with chart.js using Buttons
- Chartsjs only showing two data points
- Trying to use axios, vuejs and a dummy api for my chartjs and googlecharts (get requests only)
- Why is Chart js first bar too small or not showing at all?
- React ChartJS Scatter Plot - cannot plot the data
- Multipe doughnut charts on one page with text in center using Chart.js
- Chart.Js - Display only specific (fixed) X axis labels
- How to display date instead of year in morris line chart in js
- Stacked Bar chart fixed width bar chart issue - Chartjs
- Does the chartjs supports localization?
- Chartjs box plot with Y-axis negative values
- Pass Data From Node/Express to Front-End Javascript
- Chartjs show seconds on the x axis and volume on the y
- Map event position to y axis value in chartjs line chart
- ChartJS tooltip label for pie cart being cut
- Chart.js bar chart labels do not valign
- Angular Charts.js: Can't refresh chart with data