Tooltips

    Possible modes are:

    • 'average'
    • 'nearest'
      'average' mode will place the tooltip at the average position of the items displayed in the tooltip. 'nearest' will place the tooltip at the position of the element closest to the event position.

    New modes can be defined by adding functions to the Chart.Tooltip.positioners map.

    Allows sorting of . Must implement at minimum a function that can be passed to Array.prototype.sort. This function can also accept a third parameter that is the data object passed to the chart.

    The tooltip label configuration is nested below the tooltip configuration using the callbacks key. The tooltip has the following callbacks for providing text. For all functions, 'this' will be the tooltip object created from the Chart.Tooltip constructor.

    All functions are called with the same arguments: a and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

    NameArgumentsDescription
    beforeTitleArray[tooltipItem], dataReturns the text to render before the title.
    titleArray[tooltipItem], dataReturns text to render as the title of the tooltip.
    afterTitleArray[tooltipItem], dataReturns text to render after the title.
    beforeBodyArray[tooltipItem], dataReturns text to render before the body section.
    beforeLabeltooltipItem, dataReturns text to render before an individual label. This will be called for each item in the tooltip.
    labeltooltipItem, dataReturns text to render for an individual item in the tooltip.
    labelColortooltipItem, chartReturns the colors to render for the tooltip item. more…
    labelTextColortooltipItem, chartReturns the colors for the text of the label for the tooltip item.
    afterLabeltooltipItem, dataReturns text to render after an individual label.
    afterBodyArray[tooltipItem], dataReturns text to render after the body section
    beforeFooterArray[tooltipItem], dataReturns text to render before the footer section.
    footerArray[tooltipItem], dataReturns text to render as the footer of the tooltip.
    afterFooterArray[tooltipItem], dataText to render after the footer section

    For example, to return a red box for each item in the tooltip you could do:

    Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an oncanvas one. You can enable custom tooltips in the global or chart configuration like so:

    See samples/tooltips/line-customTooltips.html for examples on how to get started.

    The tooltip model contains parameters that can be used to render the tooltip.