Style Analysis chart

by Sushil Mahajan

HTML

<script src="https://cdn.jsdelivr.net/highstocks/1.3.7/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

CSS

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

JavaScript

$('#container').highcharts(var chartOptions = {
  chart: {
    type: 'spline', // changed from line to spline

  }
  yAxis: {
    gridLineWidth: 1,
    labels: {
      format: '{value}',
      align: "left"
    },
    startOnTick: false,
    showLastLabel: true,
    showFirstLabel: true,
    endOnTick: false, // Use this in combination with maxPadding to see the last label
    maxPadding: 0.2

  },

  xAxis: {

    labels: {
      y: 20,
      formatter: function() {
        return Highcharts.dateFormat("%b-%Y", new Date(this.value))
      },
      style: {
        color: 'black'
      }
    },
    tickLength: 0,

    events: {
      setExtremes: function(e) {
        if (e.trigger == "rangeSelectorButton") {

          if (self.showRelativeGraph == false) {
            if (e.rangeSelectorButton.text == "6m" || e.rangeSelectorButton.text == "3m" || e.rangeSelectorButton.text == "1m" || e.rangeSelectorButton.text == '1y') {
              var extremes = self.chart.xAxis[0].getExtremes();
              var difference = e.max - e.min;
              var max = extremes.dataMax;
              var min = max - difference;
              setTimeout(function() {
                self.chart.xAxis[0].setExtremes(min, max);
              }, 10);
            }
          }
        }
      }


    }
  },

  legend: {
    enabled: false
  },

  navigator: {
    enabled: true,
    margin: 5,
    maskFill: 'rgba(92, 191, 145, 0.23)',
    series: {
      //lineColor: '#5CBF91'
    },
    xAxis: {
      labels: {
        style: {
          color: 'black'
        }
      }
    }
  },

  tooltip: {
    shared: true,
    useHTML: true,
    valueSuffix: '',
    shape: "callout",
    formatter: function() {
      var s = ['<ul><li class="performance-tooltip-li"><span class="tt-point-date"><b>' + Highcharts.dateFormat("%a %b %e, %Y", new Date(this.x)) + '</b></span></li>'];
      $.each(this.points, function(i, point) {
        s.push('<li class="performance-tooltip-li"><span...