Chart JS custom tooltip option?

by

Try this:

You can make changes globally using this code:

Chart.defaults.global = {

    // Boolean - Determines whether to draw tooltips on the canvas or not
    showTooltips: true,

    // Array - Array of string names to attach tooltip events
    tooltipEvents: ["mousemove", "touchstart", "touchmove"],

    // String - Tooltip background colour
    tooltipFillColor: "rgba(0,0,0,0.8)",

    // String - Tooltip label font declaration for the scale label
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

    // Number - Tooltip label font size in pixels
    tooltipFontSize: 14,

    // String - Tooltip font weight style
    tooltipFontStyle: "normal",

    // String - Tooltip label font colour
    tooltipFontColor: "#fff",

    // String - Tooltip title font declaration for the scale label
    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

    // Number - Tooltip title font size in pixels
    tooltipTitleFontSize: 14,

    // String - Tooltip title font weight style
    tooltipTitleFontStyle: "bold",

    // String - Tooltip title font colour
    tooltipTitleFontColor: "#fff",

    // Number - pixel width of padding around tooltip text
    tooltipYPadding: 6,

    // Number - pixel width of padding around tooltip text
    tooltipXPadding: 6,

    // Number - Size of the caret on the tooltip
    tooltipCaretSize: 8,

    // Number - Pixel radius of the tooltip border
    tooltipCornerRadius: 6,

    // Number - Pixel offset from point x to tooltip edge
    tooltipXOffset: 10,

    // String - Template string for single tooltips
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

    // String - Template string for single tooltips
    multiTooltipTemplate: "<%= value %>",

    // Function - Will fire on animation progression.
    onAnimationProgress: function(){},

    // Function - Will fire on animation completion.
    onAnimationComplete: function(){}
}

Use this Link for reference

More Related Contents:

  1. How to display data values on Chart.js
  2. Dynamically update values of a chartjs chart
  3. How to add text inside the doughnut chart using Chart.js?
  4. Chart.js — drawing an arbitrary vertical line
  5. Click events on Pie Charts in Chart.js
  6. Destroy chart.js bar graph to redraw other graph in same
  7. ChartJS – Different color per data point
  8. Chart.js – draw horizontal line
  9. How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
  10. How to put rounded corners on a Chart.js Bar chart
  11. How to clear a chart from a canvas so that hover events cannot be triggered?
  12. Different color for each bar in a bar chart; ChartJS
  13. ChartJS: datalabels: show percentage value in Pie piece
  14. Limit labels number on Chart.js line chart
  15. How to set ChartJS Y axis title?
  16. Remove x-axis label/text in chart.js
  17. How to create rounded bars for Bar Chart.js v2?
  18. Chart.js v2: How to make tooltips always appear on pie chart?
  19. chart.js load totally new data
  20. chart.js Failed to create chart: can’t acquire context from the given item
  21. Chartjs Bar Chart showing old data when hovering
  22. Custom Legend with ChartJS v2.0
  23. How to change colours for Angular-Chart.js
  24. How to add images as labels to Canvas Charts using chart.js
  25. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  26. ng2-charts update labels and data
  27. Horizontal stacked bar chart with chart.js
  28. Chart.js Line, different fill color for negative point
  29. How do I put this on Real-Time? I already put (async: True) but it doesnt work
  30. Find the “potential” width of a hidden element

Leave a Comment