Highcharts Demo

author(s): Lars Cabrera

HTML

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

<div id="container1" class="container"></div>
<div id="container2" class="container"></div>
<div id="container3" 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", {
  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: "2017-01-01",
      pointInterval: 36e5,
    },
  ],
})

Highcharts.chart("container3", {
  title: {
    text: "Sidney time",
  },

  time: {
    timezone: "Australia/NSW",
  },
  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: "2017-01-01",
      pointInterval: 36e5,
    },
  ],
})
Highcharts.chart("container2", {
  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: "2017-01-01",
      pointInterval: 36e5,
    },
  ],
})

Highcharts.charts.forEach((chart) => {
  // Use the Time object
  console.log(
    "Current time in " + chart.userOptions.time.timezone,
    chart.time.dateFormat("%Y-%m-%d %H:%M:%S", Date.now()),
  )
})