Highcharts Demo

author(s): Torstein Hønsi

by Ruslan

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="container" ></div>

CSS

body {
  background-color: #ebebf5;
}

JavaScript

/**
 * Creates a new area and render it to the specified element
 * @param {string} elementId - DOM element id
 * @param {number[]} data - area chart data
 * @param {string} title - area chart title
 */
window.renderAreaChart = (elementId, data = [], title) => {
  const areaChartOptions = {
    chart: {
      renderTo: elementId,
      type: 'area',
      spacingTop: 30,
      backgroundColor: '#ebebf5',
      height: title ? 340 : 265,
      plotBackgroundColor: {
        linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
        stops: [
          [0, '#bcbcc4'],
          [1, '#ebebf5']
        ]
      }
    },
    title: title ? {
      text: title,
      align: 'left',
      style: {
        fontFamily: 'PTSansRegular',
        color: '#396a9c',
        fontSize: '30',
        fontWeight: '600'
      },
      y: 22,
      x: 55
    } : {text: null},
    credits: {enabled: false},
    legend: {enabled: false},
    exporting: {enabled: false},
    xAxis: {
      allowDecimals: false,
      labels: {
        formatter () {
          const months = [
            'JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'
          ];
          return months[this.value];
        },
        align: 'left',
        style: {
          fontSize: '16px',
          opacity: '0.8'
        }
      },
      min: 0,
      maxPadding: 0.05,
      tickLength: 0,
      lineWidth: 0
    },
    yAxis: {
      title: {
        text: null
      },
      labels: {
        x: -10,
        formatter () {
          if (this.isFirst) {
            return '<span style="baseline-shift: 35%;">0%</span>';
          }
          if (this.isLast) {
            return '<span style="baseline-shift: -42%;">100%</span>';
          }
          return null;
        },
        style: {
          fontSize: '18px',
          opacity: '0.8'
        }
      },
      gridLineWidth: 0
    },
    tooltip: {
      pointFormat: '<span style="font-size:30px;"><b>{point.y:,.0f}%</b></span>',
...