plot adjacent scatter points for different box plots in boxplot chart - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Scatter Chart

Description

plot adjacent scatter points for different box plots in boxplot chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <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"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//from w  ww. j  a  v a  2  s .  c o  m
    type: 'boxplot',
    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);
    }
  }
},
series: [{
  name: 'Observations',
  pointWidth: 15,
  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]
  ],
}, {
  pointWidth: 10,
  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, 644],
    [4, 718],
    [4, 951],
    [4, 969]
  ]
}, {
  name: 'Outlier 2',
  color: Highcharts.getOptions().colors[1],
  type: 'scatter',
  data: [ // x, y positions where 0 is the first category
    [0, 644],
    [4, 718],
    [4, 951],
    [4, 969]
  ]
}]
});

      </script>  
   </body>
</html>

Related Tutorials