Highcharts test

by ikbelkirasan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Questrial');
#container * {
  font-family: 'Questrial', sans-serif !important;
}

JavaScript

Highcharts.chart({

  // chart
  chart: {
    renderTo: 'container',
    type: 'area',
    height: 200,
  },

  colors: ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"].sort(function() {
    return .5 - Math.random();
  }),

  // Disable highcharts credit
  credits: false,

  // chart title
  title: {
    text: ''
  },

  plotOptions: {
    series: {
      enableMouseTracking: true
    }
  },

  exporting: {
    enabled: false
  },

  //xAxis
  xAxis: {
    categories: ['12:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
    labels: {
      step: 3
    },
    lineColor: '#666',
    lineWidth: 1,
    tickColor: '#666',
    tickWidth: 1,
  },
  // yAxis
  yAxis: {
    title: {
      text: '' //'Pageviews by Browser'
    },
    labels: {
      formatter: function() {
        return this.value;
      },
      step: 1
    },
    gridLineColor: 'transparent',
    lineColor: '#666',
    lineWidth: 1,
    tickColor: '#666',
    tickWidth: 1,
  },

  // Tooltip
  tooltip: {
    crosshairs: false,
    shared: true
  },

  // Series
  series: [{
    name: 'Chrome',
    marker: {
      enabled: false,
    },
    states: {
      hover: {
        enabled: false
      }
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

  }, {
    name: 'Firefox',
    marker: {
      enabled: false,
    },
    states: {
      hover: {
        enabled: false
      }
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6].reverse()

  }]
});