Highcharts Demo

author(s): Torstein Hønsi

by YameenYasin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

</br>
<div id="container1" style="min-width: 310px; height: 300px; max-width: 800px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 300px; max-width: 800px; margin: 0 auto"></div>
<div id="container3" style="min-width: 310px; height: 300px; max-width: 800px; margin: 0 auto"></div>
<div id="container4" style="min-width: 310px; height: 300px; max-width: 800px; margin: 0 auto"></div>
<div id="container5" style="min-width: 310px; height: 300px; max-width: 800px; margin: 0 auto"></div>
<div id="container6" style="min-width: 310px; height: 300px; max-width: 800px; margin: 0 auto"></div>

CSS

#container1,
#container2,
#container3,
#container4,
#container5,
#container6 {
  margin-top:-24px!important;
}
.highcharts-credits {
  display:none;
}
#container6 .highcharts-credits {
  display:block;
}

JavaScript

Highcharts.chart('container1', {
  chart: {
    type: 'scatter',
    plotBorderWidth: 3,
    zoomType: 'xy',
    backgroundColor:null,
    marginLeft:80
  },
  title: false,
  subtitle:false,
  xAxis: {
    title: {
      enabled: false,
      text: 'FlowerSize (FS)'
    },
    labels: {
        enabled: false
    },
    tickLength: 0,
    startOnTick: true,
    endOnTick: true,
    showLastLabel: true
  },
  yAxis: {
    title: {
      enabled: true,
      text: 'Lightttttttttttttthtttttttttttttt (L)'
    },
    startOnTick: false,
    endOnTick: false,
    showLastLabel: true
  },
  exporting: {        
      enabled: false
  },
  legend: {
      enabled: false,
      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: 10,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th colspan="2"><h3><b>{series.name}　　</b></h3></th></tr>' +
            '<tr><th>FS:</th><td>{point.x}</td></tr>' +
            '<tr><th>　AT:</th><td>{point.y}</td></tr>',
        footerFormat: '</table>'
      }
    }
  },
  series: [{
    name: 'S1',
    color: 'rgba(223, 83, 83, .5)',
    data: [
      [7.249684, 9852]
    ]
  }, {
    name: 'S2',
    color: 'rgba(123, 0, 83, .5)',
    data: [
      [7.729007, 8348]
    ]
  }, {
    name: 'S3',
    color: 'rgba(119, 152, 191, .5)',
    data: [
      [7.017495, 9537]
    ]
  }, {
    name: 'S4',
    color: 'rgba(23, 50, 255, .5)',
    data: [
      [7.512445, 11957]
    ]
  }, {
    name: 'S5',
   ...