Highcharts Demo

author: Fábio Nogueira

by Fabio Nogueira

HTML

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

<div id="container"></div>

CSS

#container {
    height: 400px;
}

JavaScript

Highcharts.chart('container', def());

function def() {
  const values = generateValues();

  return {
    chart: {
      zoomType: 'xy', // permite selecionar parte do gráfico para zoom
    },
    title: {
      text: 'Submercado, 2023',
      align: 'left',
    },
    subtitle: {
    },
    xAxis: [
      {
        aggr: values.days,
        // tickInterval: 10, // intervalo entre os dias
        crosshair: true,
      },
    ],
    yAxis: [
      // Primary yAxis
      {
        max: values.max,
        labels: {
          format: '{value}°C',
          // style: {
          //     color: Highcharts.getOptions().colors[1]
          // }
        },
        title: {
          text: 'Temperatura',
          // style: {
          //     color: Highcharts.getOptions().colors[1]
          // }
        }
      },

      // Secondary yAxis
      {
        max: values.max,
        title: {
          text: 'Precipitação',
          // style: {
          //     color: Highcharts.getOptions().colors[0]
          // }
        },
        labels: {
          format: '{value} mm',
          // style: {
          //     color: Highcharts.getOptions().colors[0]
          // }
        },

        opposite: true, // coloca a escala do lado oposto (direita)
        reversed: true, // inverte a posição das barras, fica de cima pra baixo
      },
    ],
    tooltip: {
      shared: true, // mostra o tooltip com dados de ambas as séries
    },
    series: [
      {
        name: 'Precipitação',
        type: 'column',
        yAxis: 1,
        data: values.precipitation,
        tooltip: {
          valueSuffix: ' mm',
        }
      },
      {
        name: 'Temperatura',
        type: 'area', // 'line', // 'spline',
        data: values.temperature,
        tooltip: {
          valueSuffix: '°C',
        },
      },
    ],
    // colors: ['#da1e28', '#ff832b','#f1c21b','#198038',], // custom colors for this chart
    plotOptions: {
      series: {
        // compare: 'percent'
   ...