espi
Posts: 2
Joined: Tue May 14, 2019 10:39 pm

Custom Tooltip Content in Highcharts Cloud

I'm looking for a way to provide custom content to my chart tooltip that isn't just the Chart series data, or x/y axis labels using the Highcharts Cloud UI. For example, a line chart that provides, on hover, a tooltip with a descriptive paragraph for context.

I've seen a way to do this using the Highcharts JS library (example below).

new Highcharts.Chart( {
series: [ {
name: 'Foo',
data: [
{
y : 3,
descriptiveTooltip : 'Descriptive paragraph of context'
},
{
y : 7,
descriptiveTooltip : 'Descriptive paragraph of context'
},
{
y : 1,
descriptiveTooltip : 'Descriptive paragraph of context'
}
]
} ],
tooltip: {
formatter: function() {
return 'Extra data: <b>' + this.point.descriptiveTooltip + '</b>';
}
}
} );

Is there any way to implement this without the use of Custom Code so that a non-developer could create this in the Data spreadsheet tab? If not, how would I implement this using Custom Code while still preserving the data I've inputted in the Data tab? I'm a bit confused on if adding this newly formatted array of data in Custom Code overrides or affects the data already added the Cloud Data spreadsheet tab.

Thank you!
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Custom Tooltip Content in Highcharts Cloud

Hi espi,

Welcome to our forum and thanks for contacting us with your questions!

Here are the steps to get displayed custom text in the tooltip:
1) Pun into the column your custom text and, on the right sight, assign this column to the label field:
label.PNG
label.PNG (77.45 KiB) Viewed 7172 times
2) You'd probably want to disable dataLabels - go to Customize -> Advanced -> Plot Options -> Series -> Data Labels and unmark Enabled option.

3) Go to Customize -> Advanced -> Tooltip and find one one the field where you want to display your custom text, for example Footer Format and paste this: "{point.point.label}"
tooltip.PNG
tooltip.PNG (58.3 KiB) Viewed 7172 times

Let me know if it worked or you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
espi
Posts: 2
Joined: Tue May 14, 2019 10:39 pm

Re: Custom Tooltip Content in Highcharts Cloud

Thanks for sending this over. I was able to create tooltips per your instructions.

I am however encountering one bug and it pertains to Step 2) Customize -> Advanced -> Plot Options -> Series -> Data Labels and unmark Enabled option. I can successfully disable the Data Labels and save+publish my chart with everything looking great. However, every time I return to that chart in the Cloud editor, the Data Labels are once again Enabled, despite me having saved and published the chart without the labels on my previous visit. Thus, I have to go in and Disable the data labels every time I visit the chart in Cloud editor.

This is happening on multiple bar charts; I created a new one from scratch with default data and it is also occurring.

Thank you!
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Custom Tooltip Content in Highcharts Cloud

Hi espi!

Sorry for a late reply, I was off all week.

I tested it and you are right, there is a bug. I reported it on our Cloud issues channel here: https://github.com/highcharts/highchart ... issues/490

Thank you and best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”