Hi Brian, 

You can use a custom json configuration to accomplish this. With texttemplate you can define how certain values are displayed using d3 format. Set this on the advanced configuration at the series object. 

You can see an example here: https://plotly.com/javascript/texttemplate/

Hey Brian,

I looked into one of my projects to check for an example.

First of all, i gave you the wrong information before, you need to use hovertemplate instead of texttemplate.

Hovertemplate is explained here. You can use d3 formatting for date/time and numbers.

Here are some tokens that i used:

{%fullData.name}
Shows the name of the series

%{x}
shows value on X

%{y}
shows value on Y

F.i. when X is a date/time attribute:

"<b>%{fullData.name}:</b><br>%{x|%d %B}<extra></extra>"

Will show the name of the series and the date with %d and %B formatting rules:

%d - zero-padded day of the month as a decimal number [01,31].
%B - full month name.

Anything contained in tag `<extra>` is displayed in the secondary box, for example "<extra>{fullData.name}</extra>". To hide the secondary box completely, use an empty tag `<extra></extra>`

Now, if you want to test this in your own project, first set your widget to development mode:

Run your application and switch to dev mode using the ‘TOGGLE EDITOR’ button next to the widget here (i've used anychart widget in this example):

Now you can see the chart configuration for Layout, Data and Configuration (which is plotly standard). The column widget you are using is generating some default configuration which is showed in the lowest window. Your own customization is displayed on top. In the end when running, these settings are being merged. So, to add the specific hovertemplate, you can test it by typing or copy/pasting the JSON code on top.

First, switch to ‘DATA’, because that is where the series’ specific configuration is stored. Note that in the example below, almost all data is generated dynamically.

Hovertemplate is configured like this:

"hovertemplate": "<b>%{x|%d %b %H:%M}</b><br>%{fullData.name}: %{y} <extra></extra>"

The hovertemplate for this example looks like this:

To round down the number for Y, use the :f token to set it to fixed:

%{y:f}

To add this to you series’ config, first test it by adding it to ‘Data’ in the widget toggle editor by using this json:

{
"hovertemplate": "%{y:f} <extra></extra>"
}

you can instantly check if this works. When it works, copy the JSON and paste it in the widget series’ advanced tab.

GL!

Note the grey number which is exactly what I wanted, following your directions. Thank you. But then, notice the old number in white still shows up.