Time series, zoomable

author(s): Torstein Hønsi

by BrankoSabo

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.getJSON(
  'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/usdeur.json',
  function(data) {

    Highcharts.chart('container', {

      chart: {
        type: 'area',
        zoomType: 'x'
      },
      title: {
        text: 'BNP Paribas Turkey Equity Classic R'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Price'
        },
        gridLineColor: 'rgba(0, 0, 0, 0.02)',
        opposite: true
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          marker: {
            enabled: true,
            symbol: 'circle',
            states: {
              hover: {
                lineWidth: 2,
                radius: 3
              }
            }
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },

          threshold: null
        }
      },
      series: [{
        name: 'Series 1',
        marker: {
          enabled: false
        },
        curve: {
          enabled: true
        },
        data: [
          [Date.UTC(2010, 0, 1), 23.56],
          [Date.UTC(2011, 0, 1), 24.01],
          [Date.UTC(2012, 0, 1), 26.41],
          [Date.UTC(2013, 0, 1), 28.98],
          [Date.UTC(2014, 0, 1), 31.12]
        ],
        color: '#1c84c6',
        fillOpacity: 0
      }, {
        name: 'Series 2',
        curve: {
          enabled: true
        },
        marker: {
          enabled: false
        },
        data: [
          [Date.UTC(2010, 0, 1), 24.56],
          [Date.UTC(2011, 0, 1), 25.01],
          [Date.UTC(2012, 0, 1), 27.41],
          [Date.UTC(2013, 0, 1), 29.98],
          [Date.UTC(2014, 0, 1), 32.12]
        ],
        color: '#f8ac59',
        fillColor: {
          linearGradient: {
            x1: 0.5,
            y1: 0,
            x2: 0,
            y2: 0.5
          },
          stops: [
            [0, 'rgba(255, 0, 0,...