Basic line

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <button id="test" >
    Update Series
  </button>
 </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

const optionsA = {
  chart: {
    renderTo: "container",
    type: "column",
    polar: false,
    style: {
      fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif"
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  title: {
    text: null,
    align: "left",
    style: {
      fontSize: "16px"
    }
  },
  boost: {
    useGPUTranslations: false
  },
  plotOptions: {
    series: {
      fillOpacity: 0.4,
      pointPadding: 0,
      groupPadding: 0.05,
      label: {
        style: {
          fontWeight: "normal"
        }
      },
      dataLabels: {
        style: {
          fontWeight: "bold"
        }
      },
      stacking: "normal"
    }
  },
  tooltip: {
    useHTML: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    tickmarkPlacement: "on",
    labels: {
      autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90]
    },
    title: {
      text: null
    },
    visible: true,
    categories: ["09"]
  },
  yAxis: [
    {
      title: {
        text: null
      },
      visible: true,
      plotLines: [
        {
          value: 9355.5,
          zIndex: 1,
          width: 5,
          color: "rgba(135, 206, 250, 1)",
          label: {
            text: "Set point"
          }
        }
      ],
      reversedStacks: false
    },
    {
      title: {
        text: null
      },
      visible: true,
      reversedStacks: false
    }
  ],
  series: [
    {
      type: "column",
      data: [
        {
          y: 0
        }
      ],
      color: "rgba(70, 170, 255, 0.6980392156862745)",
      tooltip: {
        headerFormat: "<span>Performance</span><br/>"
      }
    },
    {
      type: "column",
      data: [
        {
          y: 0
        }
      ],
      color: "rgba(191, 191, 191, 0.6980392156862745)",
      tooltip: {
        headerFormat: "<span>Performance - Forecast</span><br/>"
      }
    }
  ],
  colors:...