Highcharts Demo cvcvc

author(s): Torstein Hønsi

by tin nguyen

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.theme = {
  global: {
    getTimezoneOffset: function(timestamp) {
      return new Date().getTimezoneOffset();
    },
    useUTC: false
  },
  colors: ['#468EE6', '#926846', '#8C16FF', '#91D53E', '#4D7D00', '#FEA300', '#CD0000', '#154F94', '#92998C', '#D66820'],
  chart: {
    zoomType: 'x',
    panning: true,
    panKey: 'shift',
    backgroundColor: null,
    style: {
      fontFamily: '"Open Sans", "Helvetica Neue", "HelveticaNeue", "Helvetica", "Arial", "sans-serif"'
    },
    reflow: true
  },
  title: {
    style: {
      color: 'black',
      fontSize: '12px',
      visibility: 'hidden'
    }
  },
  subtitle: {
    style: {
      color: 'black'
    }
  },
  tooltip: {
    borderWidth: 0,
    followPointer: false,
    followTouchMove: true,
    shadow: true,
    //	snap: 2,
    hideDelay: 0,
    // format values to 2 decimal places.
    valueDecimals: 2,
    useHTML: true
  },
  exporting: {
    enabled: false
  },
  legend: {
    floating: true,
    align: 'right',
    verticalAlign: 'top',
    itemMarginTop: 5,
    itemStyle: {
      cursor: 'default',
      fontSize: '12px',
      fontWeight: 'normal',
      color: 'rgba(0,0,0,0.6)'
    },
    itemHoverStyle: {
      color: 'rgba(0,0,0,0.6)'
    }
  },
  plotOptions: {
    line: {
      softThreshold: false
    },
    series: {
      stickyTracking: true,
      shadow: false,
      lineWidth: 1,
      states: {
        hover: {
          enabled: false
        }
      },
      marker: {
        enabled: false
      }
    },
    candlestick: {
      lineColor: '#404048'
    },
    map: {
      shadow: false
    }
  },
  navigator: {
    xAxis: {
      gridLineColor: '#D0D0D8'
    }
  },
  rangeSelector: {
    buttonTheme: {
      fill: 'rgba(128,128,128,0.30)',
      stroke: 'none',
      'stroke-width': 1,
      states: {
        select: {
          fill: '#D0D0D8'
        }
      }
    }
  },
  scrollbar: {
    trackBorderColor: '#C0C0C8'
  },
  credits: {
    enabled: false
  },
 ...