score:9
Accepted answer
Here is an example of custom tooltip label:
var ctx = document.getElementById("myChart");
var barChartData = {
labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
datasets : [ {
type : 'bar',
label : "Revenue (US$)",
data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
backgroundColor : 'rgba(0, 0, 255, 0.3)'
} ]
};
var myChart = new Chart(ctx,
{
type : 'bar',
data : barChartData,
options : {
responsive : true,
tooltips : {
callbacks : { // HERE YOU CUSTOMIZE THE LABELS
title : function() {
return '***** My custom label title *****';
},
beforeLabel : function(tooltipItem, data) {
return 'Month ' + ': ' + tooltipItem.xLabel;
},
label : function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
},
afterLabel : function(tooltipItem, data) {
return '***** Test *****';
},
}
},
scales : {
xAxes : [ {
display : true,
labels : {
show : true,
}
} ],
yAxes : [ {
type : "linear",
display : true,
position : "left",
labels : { show : true },
ticks : {
beginAtZero : true
}
} ]
}
}
});
Source: stackoverflow.com
Related Query
- Chart.js tooltipTemplate not working
- Time Series Line chart js in react not working
- Click event of stacked line chart not working
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Css style not working well when resizing chart height in angular application
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- in chart js tooltip font size is not working
- Chart JS not working with date
- Background color of the chart area in chartjs not working
- Chartjs with Vue, Bar Chart Border Radius not working
- Chart.js bubble chart pointStyle not working
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Charts.js - Bar chart different colors for value intervals not working
- Chart JS not working with Phonegap
- Legend color not working with randomly generated background colors in chartjs pie chart
- Vertical align bar chart from chart.js not working
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- vue-chartjs not working properly in flexbox and when resize chart goes blank
- chart.js legend not working for pie chart
- Chart JS not working with Dynamic Data
- ChartJS autoskip:False not working on line chart
- Destroying chart.js is not working when chart created inside function - chart.destroy() is not a function
- Chart JS tick options not working for y axis
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- Chart js not working properly in Safari
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Tooltip callbacks in line chart JS not working
- Chart js plugin annotation not working in vue
More Query from same tag
- chartjs 2.7 how to add labels in center of horizontal bar graph
- Chart.js nuget Package with angularJS
- chart.js with json data and jquery - error :-(
- Gantt Chart Variation with Chart JS or other libraries
- Adding Image inside Linechart points in ChartJs
- How to use Chart.js in Angular4?
- stepsize x-axe with time string labels
- Canvas not working in jQuery Mobile
- chart.js filltext object moved when tooltip is generated because of legend not displaying
- protoype js 1.0.6 is conflicting with chart js
- Chart.js create line graph using dates in the x-axis that reflect real time intervals (not evenly distributed)
- Chart.js multiple series with same scale
- Pie chart is not getting rendered in ChartJS
- Customize Chart js dataset data
- React component wont re-render ChartJS chart with redux props
- Php add dummy data to array
- Chart.js remove border from x/y Axis
- Chart.js show negative value in the top half
- Customize legend AngularJS
- generate multiple charts via loop for chart js
- Chart.JS: Show custom labels permanentely on doughnut chart
- How to resize chartjs in bootstrap columns for different browsers
- How to adjust the Js Chart's label?
- How To Add Center-Text in Donut Chart Js
- How to center radar chart ticks when changing start angle of chart?
- Pass function elements to render in js
- Change Vertical Line and Color bar chart in bar chart.js
- Populating javascript chart with Razor model data
- Dynamically populating data into chart in Chart.js
- Different gridline steps on chart js line chart