CODEWITHSUNDEEP
javascripthighchartsboxplot
dracodormiens
dracodormiens

Reputation: 520

Highcharts: How to plot adjacent scatter points for different box plots

Outlier Scatter Points are being merged instead of being shown side by side just like boxes

In the above image, I have two box plot series with their respective outlier scatter points. But since the data is same for both series, outliers of one boxplot series are overlapping with the outliers of other box plot series. Can I achieve something like having outlier points of each box exactly underneath them and not merge to a single point. That is, scatter points should be placed side by side, just like boxes are placed and should not overlap.

Upvotes: 0

Views: 1335

Answers (1)

morganfree
morganfree

Reputation: 12472

Update

More accurate position of the scatter points can be achieved by dynamic calculation which should base on the already drawn box plots.

On load events, you can grab the middle of the box plot and set that value as the scatter x coordinate.

 events: {
   load: function() {
        const boxplotSeries = this.series.slice(0, 2);

        const calculateOutlierX = (category, series) => {
          const point = series.data[category];
          const shapeArgs = point.shapeArgs;
          const corr = (point.stem.strokeWidth() % 2) / 2;

        return series.xAxis.toValue(shapeArgs.x + (shapeArgs.width / 2) + series.group.translateX + corr);
      }



        const adjustedOutliers = this.series.slice(2).map((series, i, ser) => {
        return series.data.map(point => [calculateOutlierX(point.x, boxplotSeries[i]), point.y]);
      });

         this.series[2].setData(adjustedOutliers[0], false);
        this.series[3].setData(adjustedOutliers[1], true);
    }
  }

live example: http://jsfiddle.net/sza4odkz/1/

Pre-update

You need to adjust the position of the scatter points. E.g., if you want to adjust the scatter points to fit the left boxplot subtract 0.2 from their x coordinate. Similarly, to fit the right box plot, add 0.2

{
  data: [
    [0 - 0.2, 644],
    [4 - 0.2, 718],
    [4 - 0.2, 951],
    [4 - 0.2, 969]
  ]
}, {
  data: [
    [0 + 0.2, 644],
    [4 + 0.2, 718],
    [4 + 0.2, 951],
    [4 + 0.2, 969]
  ]

Live example and output

http://jsfiddle.net/sza4odkz/

Highcharts.chart('container', {

  chart: {
    type: 'boxplot'
  },

  series: [{
    name: '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]
    ],
  }, {
    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]
    ]
  }, {
    name: 'Outlier',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0 - 0.2, 644],
      [4 - 0.2, 718],
      [4 - 0.2, 951],
      [4 - 0.2, 969]
    ]
  }, {
    name: 'Outlier 2',
    color: Highcharts.getOptions().colors[1],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
      [0 + 0.2, 644],
      [4 + 0.2, 718],
      [4 + 0.2, 951],
      [4 + 0.2, 969]
    ]
  }]

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

Boxplot

Upvotes: 1

Related Questions