title: Creating a chart in angular2 to show the median value of given data
body: <p>I'm creating a chart in Angular 2 which shows the median value for given data, and depicts the value for the given name. How can I plot both? I'm trying with plotLines and bands, but I'm still not able to do it. Here is my code.</p>
  
  <p>I'm trying to achieve a result like this.</p>
  
  <p><a href="https://i.stack.imgur.com/WxEP0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WxEP0.png" alt="trying to achieve a result like this"></a></p>
  
  <p><a href="https://stackblitz.com/edit/angular-age8fy?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">My code</a></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Chart } from 'angular-highcharts';
  import Highcharts from 'highcharts';
  import Bellcurve from 'highcharts/modules/histogram-bellcurve';
  Bellcurve(Highcharts);
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    title = 'test-app';
    data = [];
    medianvalue:number;
    lenght:number
    medianNumber:any;
    //name :any;
    ngOnInit() {
  
    }
    constructor() {
      this.getLenght();
  }
    candidateScoreList = [
      {
        "name": "Khushroo",
        "totalScore": 49.07142857142857
      },
      {
        "totalScore": 48.214285714285715
      },
      {
        "totalScore": 42.857142857142854
      },
      {
        "totalScore": 19.642857142857142
      },
      {
        "totalScore": 46.42857142857143
      },
      {
        "totalScore": 73.21428571428572
      },
      {
        "totalScore": 85.71428571428572,
      },
      {
        "totalScore": 39.285714285714285
      },
      {
        "totalScore": 14.285714285714285
      },
      {
        "totalScore": 80.35714285714286
      },
      {
        "totalScore": 41.07142857142857,
  
      },
      {
        "totalScore": 66.07142857142857
      },
      {
        "totalScore": 73.21428571428572
      },
      {
        "totalScore": 85.71428571428572
      },
      {
        "totalScore": 66.07142857142857
      },
      {
        "totalScore": 73.21428571428572
      },
      {
        "totalScore": 39.285714285714285
      },
      {
        "totalScore": 71.42857142857143
      },
      {
        "totalScore": 41.07142857142857
      },
      {
        "totalScore": 71.42857142857143
      },
  
      {
        "totalScore": 25
      },
      {
        "totalScore": 67.85714285714286
      },
      {
        "totalScore": 53.57142857142857
      },
      {
        "totalScore": 41.07142857142857
      },
      {
        "totalScore": 60.714285714285715
      },
      {
        "totalScore": 85.71428571428572
      },
      {
        "totalScore": 80.35714285714286
      },
      {
        "totalScore": 41.07142857142857
      },
      {
        "totalScore": 78.57142857142857
      },
      {
        "totalScore": 19.642857142857142
      },
      {
        "totalScore": 78.57142857142857
      },
      {
        "totalScore": 33.92857142857143
      },
      {
        "totalScore": 46.42857142857143
      },
      {
        "totalScore": 66.07142857142857
      },
      {
        "totalScore": 46.42857142857143
      },
      {
        "totalScore": 46.42857142857143
      },
      {
        "totalScore": 25
      },
      {
        "totalScore": 53.57142857142857
      },
      {
        "totalScore": 58.92857142857143
      },
      {
        "totalScore": 85.71428571428572
      }
    ];
    labels = ['Median Score','Kushboo score'];
  
    getLenght(){
      this.lenght = this.candidateScoreList.length;
      this.medianNumber = (this.lenght)/2
      console.log(this.lenght);
      this.iterateJson();
      this.getMedian();
    }
  
    getMedian(){
      this.medianvalue = this.candidateScoreList[this.medianNumber].totalScore;
      console.log(this.medianvalue);
    }
  
    iterateJson() {
      for (var i = 0; i &lt; this.candidateScoreList.length; i += 1) {
        this.data[i]=  this.candidateScoreList[i].totalScore;
        console.log(this.data,length,this.medianvalue);
      }
    }
  
  
    chart = new Chart({
      title: {
        text: 'Overall Assessement score',
      },
      xAxis: [{
        title: { text: 'scores in %' },
        alignTicks: false
      }, {
        title: { text: '' },
        alignTicks: false,
        opposite: false
      }],
  
      yAxis: [{
        title: { text: 'No of Student' }
      }, {
        title: { text: '' },
        opposite: false
      }],
      series: [{
        name: '',
        type: 'bellcurve',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 's1',
        zIndex: -1
      }, {
        name: '',
        type: 'scatter',
        data: this.data,
        visible: false,
        id: 's1',
        marker: {
          radius: 1.5
        }
      }]
    });
  }
  </code></pre>