Customizing tooltips

[tagliala]

Hi,

I'm using chartkick and group_date for a multiple series chart like the one in the readme, let's say:

<%= line_chart @users.map{|user| {:name => user.name, :data => user.orders.group_by_week(:created_at).average(:price)}
} %>

Is there a way to customize the tooltip via chartkick? (In the above example, I need to change date format and round price to the second decimal)

TIA

[ankane]

There's no way right now.

There's a pull request for changing the date format which I'll look at when I get the chance. ankane/chartkick.js#11

For price, I would round in Ruby until there's a better solution.

[jancantor]

In regards to customizing the tooltip, I want to know if there's a way to change the label for the 'Value' string?

Here's what my current code looks like:

<%= column_chart [
        ["Very Poor", p[1]],
        ["Poor", p[2]],
        ["Average", p[3]],
        ["Above Average", p[4]],
        ["Excellent", p[5]],
        ["N/A", p[6]]
      ],
      height: "220px",
      library: {
        width: 665,
        colors: ["#29abe2"],
        tooltip: {
          textStyle: {
            color: "#333333"
          }
        },
        bar: {
          groupWidth: "50%"
        },
        vAxis: {
          gridlines: {
            color: "#eeeeee"
          }
        }
      } %>

[ankane]

Sorry @jancantor, totally missed your comment. There's no way to do this right now. Customizing tooltips will be one of the next features.

[vdmgolub]

It's a bit late, but I've found recently how to change the tooltip for highcharts. You can use pointFormat for tooltip.

Documentation: http://api.highcharts.com/highcharts#plotOptions.series.tooltip.pointFormat
Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/pointformat/

<%= column_chart [
        ["Very Poor", p[1]],
        ["Poor", p[2]],
        ["Average", p[3]],
        ["Above Average", p[4]],
        ["Excellent", p[5]],
        ["N/A", p[6]]
      ],
      height: "220px",
      library: {
        tooltip: {
          pointFormat: 'Awesome values: <b>{point.y}</b>'
        }
      } %>

[tylerlong]

@vdmgolub Thank you, it works!

[guifeliper]

Do we already have a way to change the tooltip?

[salmanQbatch]

Does Tooltip Customization feature is added ?? @ankane

[MatthieuGC]

Since you can update your chart from JS, try this :

function customTooltip() {
  // some logic
}

var chart = Chartkick.charts['yourChart'];
chart.options.library.tooltips.custom = customTooltip;
chart.setOptions(chart.options);

[ankane]

Thanks @MatthieuGC 👍

Can a few people interested in this feature gives examples of how they want to use it? This will help with designing it. Current ideas:

1. Add it inside data - line_chart [{x: 1, y: 2, tooltip: "Text 1"}, {x: 1, y: 2, tooltip: "Text 2"}] (requires a new data format)
2. Add it alongside data - line_chart data, tooltips: ["Text 1", "Text 2"]
3. Add string option - line_chart data, tooltip: "The value is ${value}" (easier to use, but less flexible)

[ankane]

One more call for examples. Then closing this out.

[tagliala]

Hi @ankane , sorry I'm not using this anymore. All the three example you have provided would have been fine for me at the moment I've needed it.

[attie]

@ankane I'd vote for option 2!

{
    "name": "Example",
    "data": [ 1, 2, 3 ],
    "tooltips": [ "First", "Second", "Third" ]
}

Doesn't break the current interface, and is more flexible than 3.

I'd also suggest that it's important to support things like line breaks (\n) and something for alignment (\t?)

Something that I'm currently working towards would appreciate a tooltip looking something like this:

Incoming: 3
Outgoing: 6
Stock:    15

I appreciate that the Graph's JSON will bloat quite considerably... but other options that support this flexibility get complex fast.

[drusepth]

Just in case it's helpful at all in the feature planning process, I wanted to also chime in with an example of why I would want to customize the tooltips for some of my graphs.

In short, I'd like to use the tooltips to "dive in" to a datapoint in most graphs and display a third axis of data that I wouldn't want "at a glance" on the chart, but rather expose for a particular point when a user expresses some interest in it (e.g. hovering over a datapoint).

For example, here's one graph of the number of words in each sentence of a document:

Hovering over sentence 39's bullet and seeing "Sentence 39: 35 words" is fine and dandy, but... I'd much rather be able to show the actual sentence in the tooltip instead of the x/y values. Here, the intent is to highlight clusters of sentences with low/high variety in length, so being able to quickly view the actual sentences being displayed makes a lot of sense in determining what to do with them (should I shorten them? lengthen them?), but plotting the actual sentence on the graph doesn't make a lot of sense.

I would be happy to fandangle data into any format for this, but my ideal structure would look something like:

{
  "name": "Example", 
  "data": [ 11, 25, 13 ], // word counts
  "tooltips": [ "Sentence 1", "Sentence 2", "Sentence 3" ] 
}

[gerard76]

I do not care much how you design it. The data needs to be massaged into the chart anyway, so massaging tooltips one way or another is a wash. I do want to give it my full support though, because being able to change tooltips in ruby would be a godsend for me.

[activklaus]

Is it possible to include the full functionality of tooltip configuration as provided by Charts.js including callbacks? -> https://www.chartjs.org/docs/latest/configuration/tooltip.html

I'd love the possibility to change the different elements of the tooltip like title, label etc.

[deneuxa]

I'd like also to be able to customize the tooltips, directly from chartkick and not doing special JS hacks updating the chart.
I'd like to change title, label, and be able to sort and filter the items.

[abepetrillo]

@MatthieuGC What did you use to wait for the chart to load before trying to access it?

[austinarchibald]

BTW for anyone having issues with this... for some reason, pointFormat stopped working for me - I didn't change any code, it all of a sudden broke. Making any changes to pointFormat did nothing, but putting it into headerFormat worked! I've noticed some inconsistency. Some of my pages use pure highcharts, some use chartkick with highcharts library, some pages have charts using both. So there may be some conflicting code. But even the pure highcharts charts pointFormat broke recently on some charts. Moving to headerFormat worked there as well.

[alex-benoit]

FYI for anyone wanting to customize the date/time format in a Chartjs time chart, you can already use options.scales[scaleId].time.tooltipFormat
ref: https://www.chartjs.org/docs/4.1.2/axes/cartesian/time.html#time-axis-specific-options

such as:

<%= line_chart data, library: { scales: { x: { time: { tooltipFormat: 'd MMM' } }}} %>

for tooltips such as 3 Jan

Follow this guide for labeling in the requested format:
https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table
ref: https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md

OR, you can pass discrete: true and build your own labels as in:

<%= line_chart data, discrete: true %>

[rosscournoyer602]

I am having an issue now where I am charting a numerical value, but want to display a formatted value in the tooltip. I have tried @MatthieuGC 's solution. I would also like to know the answer to @activklaus 's question. Can we configure using callbacks? If so, how? I cannot get it working like this in the line_chart options:

library: { plugins: { tooltips: { callbacks: { label: "function() { return 'newlabel'" }}}

[MattBudz]

It would be great to pass in a partial that contains the layout of the custom tooltip.
<%= line_chart data, tooltip: render 'custom_tooltip', locals: { data: datapoint } %>