Template strings in hover data

[chriddyp]

This could include both attributes that exist in the trace

trace.hovertemplate = '{text}<br>{marker.size} Items<br>{y} Dollars'

But also data that is computed on-the-fly by plotly.js, like the bin widths:

trace.hovertemplate = 'The number of people between the age of {binleft} and {binright} is {bintotal}.'

This means you could express the existing box and violin text with some type of hovertemplate

This could span across traces, like the hover data on stacked bars

trace.template = 'This represents {trace.y} out of {data.total}'

Or one day, perhaps even trace level computations, like the sum of the area

texttemplate = 'The sum of the money is {trace.sum}'

[chriddyp]

I believe this ties in to the parcoords PR, in customizing the different types of computed data to display (cc @jonmmease)

[etpinard]

Very related to #1919 (more precisely https://github.com/plotly/plotly.js/pull/1919/files#r130172295), where Ricky added nameformat to allow groupby trace to be names via templates.

The syntax uses %{} to denote values, so we would have:

trace.hovertemplate = '%{text}<br>%{marker.size} Items<br>%{y} Dollars'

[nicolaskruchten]

In terms of the types of output that would be permitted by this, here's an example:

[nicolaskruchten]

Note that we'll likely need to bake in some kind of printf-style number formatting here as well to control precision, separators etc.

[nicolaskruchten]

Here's how Highcharts does it:

tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },

[etpinard]

Ha poor Highcharts. Using ${} must lead to 🤕 for people using ES6 template strings.

[nicolaskruchten]

;) I was mostly pointing at the way they encode separators and precision

[alexcjohnson]

the way they encode separators and precision

Right, that's essentially the same sprintf model that python uses, and that we pulled from d3 and already use for various other contexts

plotly.js/src/plots/cartesian/layout_attributes.js

Lines 510 to 517 in 2a3dc26

	'Sets the tick label formatting rule using d3 formatting mini-languages',
	'which are very similar to those in Python. For numbers, see:',
	'https://github.com/d3/d3-format/blob/master/README.md#locale_format',
	'And for dates see:',
	'https://github.com/d3/d3-time-format/blob/master/README.md#locale_format',
	'We add one item to d3\'s date formatter: *%{n}f* for fractional seconds',
	'with n digits. For example, *2016-10-13 09:15:23.456* with tickformat',
	'*%H~%M~%S.%2f* would display *09~15~23.46*'

[antoinerg]

Should I go ahead and do as Highcharts does: if a variable name is followed by a semicolon, use the remainder as the d3 format string?

${variable_name:d3_format_string}

@nicolaskruchten @etpinard @chriddyp @alexcjohnson

[etpinard]

Should I go ahead and do as Highcharts does

Please don't! We should use the same syntax as in #1919

[etpinard]

i.e. %{} not ${} which conflicts with es6 template strings.

[nicolaskruchten]

... but the idea of : then formatting-language sounds fine to me :)