cmc
Posts: 10
Joined: Tue May 22, 2018 2:28 am

Help with scatter chart label

Thu Jul 12, 2018 3:23 am

HI,

Hoping you could tell me what I'm doing wrong in the cloud version.

The TH of the tooltip I've set up isn't showing the sector in this chart:

https://cloud.highcharts.com/show/s0bTakN3F

When it is working in this JSfiddle:

https://jsfiddle.net/crooked/xw1m60u8/

Tooltip:
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.sector}</h3></th></tr>' +
'<tr><th>Changes in Employment Share (2003-2017):</th><td>{point.x}</td></tr>' +
'<tr><th>Relative Productivity Level:</th><td>{point.y}</td></tr>' +
'<tr><th>Employment share:</th><td>{point.z}</td></tr>',
footerFormat: '</table>',
followPointer: true
},

and then down in the series:

series: [{
data: [
{ x: -0.14, y: -1.11, z: 0.32, name: '', sector: 'Agriculture, Plantation'},
{ x: 0, y: 1.69, z: 0.01, name: '', sector: 'Mining and quarrying' },
{ x: 0.01, y: 0.29, z: 0.13, name: '', sector: 'Industry' },
{ x: 0, y: 1.13, z: 0.00, name: '', sector: 'Electricity, Gas and Water' },
{ x: 0.02, y: 0.18, z: 0.07, name: '', sector: 'Construction' },
{ x: 0.04, y: -0.52, z: 0.23, name: '', sector: 'Trade, Restaurants' },
{ x: -0.01, y: 0.43, z: 0.05, name: '', sector: 'Transportation, Warehousing' },
{ x: 0.02, y: 0.87, z: 0.03, name: '', sector: 'Financial Institution' },
{ x: 0.06, y: -0.97, z: 0.16, name: '', sector: 'Social, Social and Individual' },

]
}]

Thanks!!

cmc
Posts: 10
Joined: Tue May 22, 2018 2:28 am

Re: Help with scatter chart label

Thu Jul 12, 2018 3:35 am

Correction: its a bubble chart!

rafalS
Posts: 697
Joined: Thu Jun 14, 2018 11:40 am

Re: Help with scatter chart label

Mon Jul 16, 2018 10:49 am

Hi cmc,

I'm sorry that I'm answering so late.
In your tooltip you want to read point.sector variable, but it is not defined in your chart data. You defined it in series.data, but cloud still tries to load this variable from chart data.

Solution to your problem is to put this line to the very top of your chart configuration:

Code: Select all

options.data.csv = false;
Let me know if you have any additional questions.

Best regards!
Rafal Sebestjanski,
Highcharts Developer

Return to “Highcharts Cloud”