score:0
Accepted answer
you must make sure, the label
callback function returns an array
to make it work as expected. it could be written as follows:
callbacks: {
label: function(tooltipitem, data) {
let i = tooltipitem['index'];
let label = data['labels'][i];
return label.slice(0, -1).concat(label.slice(-1) + ': ' + data['datasets'][0]['data'][i] + '%');
}
}
please take a look at below runnable code to see how it works. this is plain javascript but the label
callback function will look the same with vue.js.
new chart('chart', {
type: 'doughnut',
data: {
labels: [
['lutte contre la corruption', 'active ou passive'],
['actions en faveur de la responsabilité', 'sociétale chez les fournisseurs']
],
datasets: [{
backgroundcolor: ['#0075aa', '#258bb7'],
data: [90, 7]
}]
},
options: {
responsive: true,
maintainaspectratio: false,
legend: {
display: false
},
animation: {
duration: 3000,
easing: 'easeinoutquad'
},
tooltips: {
backgroundcolor: 'rgba(231, 30, 116, .87)',
callbacks: {
label: function(tooltipitem, data) {
let i = tooltipitem['index'];
let label = data['labels'][i];
return label.slice(0, -1).concat(label.slice(-1) + ': ' + data['datasets'][0]['data'][i] + '%');
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="chart"></canvas>
Source: stackoverflow.com
Related Query
- chart.js break line in a label with a tooltip callback
- show label in tooltip but not in x axis for chartjs line chart
- Chart js v2 tooltip callback line breaks
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How to add area with break on line chart with fill color
- Chart.js - Horizontal line on Bar chart interferes with tooltip
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Chartjs line chart gets all scrambled up when an x value coincides with a label
- Chart Js Change Label orientation on x-Axis for Line Charts
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chart.js scatter chart - displaying label specific to point in tooltip
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- How to display Line Chart dataset point labels with Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- chart.js Line chart with different background colors for each section
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How do I place a new line in a label with Chart.js?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js: Line chart with partial dashed line
- Obtain max value of y axis of line chart rendered with Chart.js
- ChartJS - Line Chart with different size datasets
- Line chart with large number of labels on X axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- ChartJS - Line chart issue with only 1 point
More Query from same tag
- Many Flots using ChartJS and Ajax get data values
- How can I sort month by order?
- Custom scatter chart extended from scatter chart becomes line chart
- Ng2-charts / chart.js - how to refresh/update chart - angular 4
- How to solve Chart js mismatched x-axes label and value dynamically in Laravel?
- Hide Legend in Chart.js V3.7.1
- How to add percentage after value data in chart
- How to expand the slice of donut chart in chartjs?
- React + Chart.js 2.0: How to put a label inside of a doughnut chart?
- Chart.js add label inside bubble chart
- Can I modify or extend ChartJS?
- how to change display and styles of the labels in react-chartjs-2
- How to change Y axis labels
- Chart js 2.x renders the canvas invisible
- Chart.js Fill color at null line and null points Tooltip
- Hide or show two datasets with one click event of legend in chart.js
- Chart.js Bar charts have always the value of 1 whyle i took variables
- Chart.js using the value of certain data in external json file
- ChartJs bar chart bar value displaying lower then Y axis value in pdf?
- Chart.js 2.9.4 - error using bundle from CDN - "chart is not defined"
- Chart.js repeating colors?
- How to set Custom tooltip event with Chartjs version 2.X
- chart.js one of the chart from mixed chart is not plotting
- Why is my chart.js not plotting correctly when changed to logarithmic?
- ChartJS: Full Date for xAxis Labels?
- Chart.js always visible labels
- Bar color in ChartJS not updating
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- How to cut line graph in ChartJS
- Append suffix to Chart.js dataset?