How to pass info to custom tooltip using time scale

If I am passing through my data as { "x": value, "y": value } for a time scale (v2), how to would I pass along info to parse in a tooltip? Previously, I would just separate values by a delimiter and put them all in the label, but as best I can tell that is not possible using the time scale.

example time data:
data: [ {"x":"2012-01-02T00:00:00+00:00","y":80}, {"x":"2012-03-13T00:00:00+00:00","y":150}, {"x":"2012-12-18T00:00:00+00:00","y":230}, {"x":"2013-01-11T00:00:00+00:00","y":310}, {"x":"2013-09-18T00:00:00+00:00","y":410}, {"x":"2013-10-16T00:00:00+00:00","y":510} ]

Author: Fantashit

1 thought on “How to pass info to custom tooltip using time scale

  1. @timalbert in your data objects you can add your extra information as keys. Only the x and y keys are reserved.

    Then, you can update the callbacks that generate the tooltip strings.

    var config = {
        tooltips: {
            callbacks: {
                title: function(tooltipItems, data) { /* generate title here */ },
                label: function(tooltipItem, data) { /* generate individual tooltip item here */ }
            }
        }
    }

    The data object is the data object that was originally passed to the chart. tooltipItem is an object that looks like

    {
        xLabel: <x value of item as string>,
        yLabel: <y value of item as string>,
        datasetIndex: index of the dataset,
        index: index in the data array
    }

    To get the data object for the item, you’d do

    data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]

Comments are closed.