JavaScript Temperature Anomaly Chart

This example shows visualization of Temperature anomaly index and Atmospheric Carbon Dioxide in parts per million (ppm for short) for period from 1880 to 2020.

  • Temperature anomaly means a departure from a reference value or long-term average. A positive anomaly indicates that the observed temperature was warmer than the reference value, while a negative anomaly indicates that the observed temperature was cooler than the reference value.

This chart has two Y axes since it displays two trends on the same time range, but with different value ranges.

The extra Y axis on the right side is created like this

const axisY2 = chart.addAxisY({ opposite: true })

When creating series, the connected axes can be explicitly defined like so

const temperatureAnomalyIndexSeries = chart.addLineSeries({ yAxis: axisY2 })

Additionally, this example showcases adding animated video icons inside the chart. The thunderclouds in this example are displayed from an attached .mp4 asset file, which is displayed using an UIElement.

const video = document.createElement('video')
video.src = 'thundercloud.mp4'

const uiIcon = chart.addUIElement().setBackground((background) => background.setFillStyle(new ImageFill({ source: video })))

Storm icon by Icons8