CODEWITHSUNDEEP
javascripthighcharts
jennEDVT
jennEDVT

Reputation: 739

Trying to overlay scatter plot on grouped box plot using highcharts.js

I'm trying to overlay a scatter plot on a grouped box plot using highcharts.js.

What I'm trying to achieve is similar to this example: https://www.highcharts.com/demo/box-plot

However, this example isn't grouped on the x-axis.

I'm able to group my box plots on the x-axis the way I need to, however, when I have more than one box per x-axis unit, then the associated scatter plots show up BETWEEN the boxes, whereas (as in the example), I want my scatter plots to show up lined up with the appropriate box.

Here's my code so far:

Highcharts.chart('container', {

  chart: {
    type: 'boxplot'
  },

  title: {
    text: 'Trying to get scatter plot outliers to line up with the box they go with'
  },

  legend: {
    enabled: false
  },

  xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
      text: 'Experiment No.'
    }
  },

  yAxis: {
    title: {
      text: 'Observations'
    },

  },

  series: [{
    name: 'Group A Observations',
    data: [
      [760, 801, 848, 895, 965],
      [733, 853, 939, 980, 1080],
      [714, 762, 817, 870, 918],
      [724, 802, 806, 871, 950],
      [834, 836, 864, 882, 910]
    ],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  },
           {
    name: 'Group B Observations',
    data: [
      [760, 831, 828, 795, 965],
      [733, 883, 939, 980, 1080],
      [714, 762, 827, 890, 918],
      [724, 802, 806, 971, 950],
      [834, 836, 864, 882, 910]
    ],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  },
           {
    name: 'Group A Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0, 644],
      [1, 718],
      [2, 951],
      [3, 969],
      [4, 969]
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
      pointFormat: 'Observation: {point.y}'
    }
  },
          {
    name: 'Group B Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0, 544],
      [1, 818],
      [2, 451],
      [3, 669],
      [4, 469]
    ],
    marker: {
      fillColor: 'white',
      lineWidth: 1,
      lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
      pointFormat: 'Observation: {point.y}'
    }
  }]

});

You can also see it on this codepen: https://codepen.io/jennEDVT/pen/NLvgod?editors=0010

The desired behavior is for the "Group A Outliers" to be lined up directly above/below/over the "Group A Observations" box. And for the "Group B Outliers" to be lined up directly above/below/over the "Group B Observations" box. But now the outliers for both groups A and B are scattered in between the two boxes.

Thank you for any help you can offer!

Upvotes: 0

Views: 742

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can use pointPlacement property:

   {
        name: 'Group A Outliers',
        color: Highcharts.getOptions().colors[0],
        pointPlacement: 0.15,
        type: 'scatter',
        data: [ // x, y positions where 0 is the first category
            [0, 644],
            [1, 718],
            [2, 951],
            [3, 969],
            [4, 969]
        ],
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: Highcharts.getOptions().colors[0]
        },
        tooltip: {
            pointFormat: 'Observation: {point.y}'
        }
    },
    {
        name: 'Group B Outliers',
        color: Highcharts.getOptions().colors[0],
        pointPlacement: -0.15,
        type: 'scatter',
        data: [ // x, y positions where 0 is the first category
            [0, 544],
            [1, 818],
            [2, 451],
            [3, 669],
            [4, 469]
        ],
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: Highcharts.getOptions().colors[0]
        },
        tooltip: {
            pointFormat: 'Observation: {point.y}'
        }
    }

API Reference: https://api.highcharts.com/highcharts/series.scatter.pointPlacement

Live demo: http://jsfiddle.net/BlackLabel/f2z9tLrs/

Upvotes: 1

Related Questions