Highcharts Demo

author(s): Lars Cabrera

by Black Label

HTML

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

<div id="container1" class="container"></div>
<div id="container2" class="container"></div>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.container {
    min-width: 300px;
    max-width: 800px;
    height: 250px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart("container1", {
  chart: {
    events: {
      load() {
        console.log(this.time.dateFormat("%Y-%m-%d %H:%M:%S", Date.now()))
      },
    },
  },

  title: {
    text: "Berlin time",
  },

  time: {
    timezone: "Europe/Berlin",
  },
  xAxis: {
    type: "datetime",
  },

  series: [
    {
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
      pointStart: Date.UTC(2017, 0, 1),
      pointInterval: 36e5,
    },
  ],
})

Highcharts.chart("container2", {
  chart: {
    events: {
      load() {
        console.log(this.time.dateFormat("%Y-%m-%d %H:%M:%S", Date.now()))
      },
    },
  },
  title: {
    text: "New York time",
  },

  time: {
    timezone: "America/New_York",
  },
  xAxis: {
    type: "datetime",
  },

  series: [
    {
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
      pointStart: Date.UTC(2017, 0, 1),
      pointInterval: 36e5,
    },
  ],
})