score:0
Accepted answer
you will have to use a custom tooltip callback like this:
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttitem) => (`${ttitem.label}: rp. ${ttitem.parsed}`)
}
}
}
}
documentation: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
v2:
options: {
tooltips: {
callbacks: {
label: (ttitem, items) => (`${items.labels[ttitem.index]}: r. ${items.datasets[ttitem.datasetindex].data[ttitem.index]}`)
}
}
}
example v3:
var options = {
type: 'pie',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1
}]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttitem) => (`${ttitem.label}: rp. ${ttitem.parsed}`)
}
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.js"></script>
</body>
example v2:
var options = {
type: 'pie',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1
}]
},
options: {
tooltips: {
callbacks: {
label: (ttitem, items) => (`${items.labels[ttitem.index]}: r. ${items.datasets[ttitem.datasetindex].data[ttitem.index]}`)
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- Pie Charts JS: How to set units?
- How set color family to pie chart in chart.js
- Charts JS: How to set units?
- Chart.js Pie Chart: How to set background image for segment
- How to use chart.js script to draw multiple pie Charts
- How do you set pie chart colors in angular-chart.js
- How to align multiple pie charts side by side?
- chartjs - how to set the order in which the different charts are displayed
- Chart.js - Draw charts with opposite bars - How to set both the y-axis ends to positive number?
- How to create two pie charts using Chart.js API?
- How we can set our own colors for each label in charts
- How to set up a simple pie chart using React in ChartJS on codesandbox
- Charts Area JS v2: How to set units?
- How to run Chart.js samples using source code
- how to not repeat code while creating multiple charts in chart js
- How to have more controls over the borderColor per arc segment for chart.js pie charts
- How to set max and min value for Y axis
- how to set start value as "0" in chartjs?
- Click events on Pie Charts in Chart.js
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How to set ChartJS Y axis title?
- Chart.js v2: How to make tooltips always appear on pie chart?
- How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?
- How to modify bar width in Chartjs 2 bar charts
- ChartJS: How to set fixed Y axis max and min
- How to set axes' step size in Chart.js 2?
- chartjs : how to set custom scale in bar chart
- How can I increase the size of the pie (Chart.JS)?
- How to set default colour for bars in Chart.js
More Query from same tag
- Realtime chart JS in Java obtaining the data from a sensor ;Chart.js: Failed to create chart: can't acquire context from the given item
- How to display Labels on Doughnut chart in Chart.js
- Chartjs How to render a custom horizon line under X-Axis
- Where can I download a certain version of d3.js for angular?
- Unable to clone a Chart.js chart in a pop up
- Including Chart.js in a webpage without node.js and without CDN
- How to set a minimum width on the values in a doughnut chart?
- Chart not displaying from JSON data
- Charts.js polar area scales
- Chart.js Cannot read property 'fontSize' of undefined
- JavaScript Error - Uncaught SyntaxError: Unexpected number
- show xAxes on click
- Chart.js - Font only renders after you reload the canvas
- Loading Laravel Chart consoletvs/charts:7.*
- ChartJS different background gradient depending on data (line graph)
- How can I put queried data (via post) on my jquery chart?
- how can we use function of one component into another js file
- Chart.js zeros handling
- how to put "%" in chart pie (chartjs)
- ChartJS chart not scaling after adding values
- How to convert chart.js library chart to image in pure node.js without using HTML and CSS?
- Show label for every data point in line chart
- Chart.js : Controller for Scatter chart doesn't work for draw function
- skipping and merging similar data ecto elixir
- ChartJS, Primeng, Gap first and end of line chart
- ChartJS: two axes in horizontalBar chart
- Custom gridLines and Axes Chartjs
- Chart.js How to align two X-axis in bar chart?
- ChartJS update data with a colour
- Unwanted line chart ''shadow" using chart.js