PHP mySQL Highcharts Json Multiselect

Question

I am trying to make a scatter plot with two serie names (subcategory).

This example from highcharts is my starting point.

In this example, you only have two categories, namely female and male. I would like to see the name of the female/male in the tooltip. Not in the legend!

In my example jsfiddle I added four names in the data and tooltip

I understand that this is not the correct way, but I would like to clarify what I want to achieve. Does anyone know how to process this correctly, so that there are still two categories in the legend (female/male), but in the tooltip also the name of the female/male.

Thank you so much already!

Highcharts.chart('container', {
chart: {
    type: 'scatter',
    zoomType: 'xy'
},
title: {
    text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
    text: 'Source: Heinz  2003'
},
xAxis: {
    title: {
        enabled: true,
        text: 'Height (cm)'
    },
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
},
yAxis: {
    title: {
        text: 'Weight (kg)'
    }
},
legend: {
    layout: 'vertical',
    align: 'left',
    verticalAlign: 'top',
    x: 100,
    y: 70,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
    borderWidth: 1
},
plotOptions: {
    scatter: {
        marker: {
            radius: 5,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: 'name: (), {point.x} cm, {point.y} kg'
        }
    }
},
series: [{
    name: 'Female',
    color: 'rgba(223, 83, 83, .5)',
    data: [{name: 'Anna', [161.2, 51.6]}, {name: 'Clair',[167.5, 59.0]]

}, {
    name: 'Male',
    color: 'rgba(119, 152, 191, .5)',
    data: [{name: 'James',[174.0, 65.6], {name: 'Peet',[175.3, 71.8]]
}]

});

Answer 1

You have a fair number of errors with brackets and curly brackets, where there are too many or few brackets. Too many for me to point them all out, but mainly around the section area.

However, you need to define the scatter plot coordinates as x, and y when you define a name for the series, like this:

series: [{
    name: 'Female',
    data: [{
        name: 'Anna'
        x: 161.2,
        y: 51.6
        },
        ...
        ]
    }
    ...
]

Also, to show the name of the datapoint (i.e. the person), you can use the following tooltip formatter:

tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: 'Name: {point.name}, {point.x} cm, {point.y} kg'
}

Highcharts API on scatter data: http://api.highcharts.com/highcharts/series.scatter.data

Working example using your data: http://jsfiddle.net/ewolden/0uc1g8b5/2/