Highcharts official support forum

Posted: **Sun Jul 31, 2016 10:17 am**

Hello,
I would like to have a name per point in a scatter plot chart. How can it be done? and is it possible with simple tools?
Thank you so much!

Posted: **Mon Aug 01, 2016 2:11 pm**

Hi Piter,

Yes, you could enable labels for points or to have different categories than point names you could set "explicit label column" in "custommize" > "simple" > "data series".
Demo: http://cloud.highcharts.com/show/inyjep

Kind Regards,

Posted: **Wed Aug 03, 2016 6:37 am**

Thank you so much!

I think that my problem was not clear, I'm sorry for this. What I want is to see the name of the points in the tooltip. I have a scatter plot with numeric values in both axes. http://cloud.highcharts.com/show/ykehad

I would like to show the name of the different points in the tooltip when you select one.

As you can see, I have designed a line as a regression line. It would be possible to show in the same tooltip the values/names for the points and the values of the regression line for each point? or maybe add a croshair line? All with Highcharts Cloud.

Thank you again!

Posted: **Fri Aug 05, 2016 3:00 pm**

Hi,

1. Yes, you could use mentioned 'custom code' input and loop over all series to find matching points like in this code:

Code: Select all

// Sample of extending options:
Highcharts.extend(options, Highcharts.merge(options, {
    plotOptions: {
        scatter: {
            tooltip: {
              pointFormatter: function(){
                var x = this.x,
                    ret = '';
                Highcharts.each(this.series.chart.series, function(s, i){
                  Highcharts.each(s.points, function(p, j){
                    if(p.x === x) ret += s.name + ': ' + p.x + ' / ' + p.y + '<br/>';
                  });
                });
                return ret;
              }
            }
        }
    }
}));

2. There is an error #15 in your chart - data for line plot is not sorted. It is not easy to notice but line between your points is not a simple line from the left-most to the right-most point, but between each point that are not sorted in asscending order by x - this is the source of the error. You could sort your data by x in ascending order to avoid duplicated line and the error visible in browser console.

Kind Regards.

Posted: **Tue Aug 09, 2016 6:15 am**

Thank you so much! This is awesome. I've added the first code and I'm solving the second problem. It's been difficult for me to write code, so I'm pleasure for your help. I would like to have a crosshair line, maybe a vertical one. Is it possible to add one? I've tried but I get no thing. But don't worry if it isn't possible, because as it is, is a great chart!
Thank you again!

Posted: **Tue Aug 09, 2016 7:49 am**

Ouh! yes!

I've added:

tooltip: {
crosshairs: [true, true]
},

in the code.

Thank you so much!
Solved.

I would study the option of the license.

Posted: **Tue Aug 09, 2016 9:17 am**

Hi,

I am glad to hear that your problems are solved. Feel free to ask if you have any more questions.

If you are interested in more advanced options you could take a look at the API reference - http://api.highcharts.com/highcharts

Kind Regards.

Posted: **Wed Jun 20, 2018 5:47 am**

Hi KacperMadej:

I'm Piter. I would like to know if since the last update of Highchart it is still possible to add name for points in a scatter chart. I have a chart like that in this page: http://secaba.ugr.es/rank/universitaria ... rsitarias/, but now I only achieve a chart like this one: https://cloud.highcharts.com/show/Bkkn0dLZm

Thank you so much!

Posted: **Wed Jun 20, 2018 12:12 pm**

Hi Piter,

The case is not as simple as using standard Highcharts, because there is no possibility to use String type values as a data field.
However, you can add another column in the data for labels, and then process existing data building your own parser for CSV. I prepared an example of how to achieve it using Highcharts Cloud. Please take a look on example below. The parser is implemented in "Custom code" tab.

Parser code:

Code: Select all

var data = options.data.csv;
var newSeries;
var oldSeriesOptions = options.series
console.log(options)

// Split the lines
var lines = data.split('\n');
lines.forEach(function(line, lineNo) {
  var items = line.split(';');
  
  // For first line create appropriate series
  if (lineNo === 0) {
  	newSeries = [{
      name: items[1],
      data: [],
      dataLabels: {
        format: "{point.label}",
      	enabled: true
      }
    }, {
      name: items[2],
      data: [],
      type: 'line',
      color: 'red',
      marker: {
      	enabled: true,
      }
    }]
  // Prepare data
  } else {
  	
    newSeries[0].data.push({
      x: parseInt(items[0]),
      y: parseInt(items[1]),
      label: items[3].slice(1, items[3].length -1)
    })
    
    newSeries[1].data.push({
      x: parseFloat(items[0]),
      y: parseFloat(items[2])
    })
    
  }

});
options.data.csv = null
options.series = newSeries

Live example : https://cloud.highcharts.com/show/SJYe2nwZ7

Best regards!

Posted: **Wed Jun 20, 2018 2:52 pm**

Hi daniel_s:

It works! thank you so much for your work. I have a question: Do I need a license for the use of the option "custom code"?

Thank you so much.

Posted: **Thu Jun 21, 2018 5:22 am**

hi Piter,

I think yes, but please contact our sales team and ask the question. Here is the email adress:
[email protected]

Best regards!

Posted: **Tue Jul 17, 2018 4:47 pm**

daniel_s wrote:Hi Piter,

The case is not as simple as using standard Highcharts, because there is no possibility to use String type values as a data field.
However, you can add another column in the data for labels, and then process existing data building your own parser for CSV. I prepared an example of how to achieve it using Highcharts Cloud. Please take a look on example below. The parser is implemented in "Custom code" tab.

Parser code:
Code: Select all
var data = options.data.csv;
var newSeries;
var oldSeriesOptions = options.series
console.log(options)

// Split the lines
var lines = data.split('\n');
lines.forEach(function(line, lineNo) {
  var items = line.split(';');
  
  // For first line create appropriate series
  if (lineNo === 0) {
  	newSeries = [{
      name: items[1],
      data: [],
      dataLabels: {
        format: "{point.label}",
      	enabled: true
      }
    }, {
      name: items[2],
      data: [],
      type: 'line',
      color: 'red',
      marker: {
      	enabled: true,
      }
    }]
  // Prepare data
  } else {
  	
    newSeries[0].data.push({
      x: parseInt(items[0]),
      y: parseInt(items[1]),
      label: items[3].slice(1, items[3].length -1)
    })
    
    newSeries[1].data.push({
      x: parseFloat(items[0]),
      y: parseFloat(items[2])
    })
    
  }

});
options.data.csv = null
options.series = newSeries
Live example : https://cloud.highcharts.com/show/SJYe2nwZ7

Best regards!

Great. Now open that chart in HC Cloud and (try to) edit it …

Highcharts official support forum

name per point in scatter plot with highchart cloud

name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud

Re: name per point in scatter plot with highchart cloud