Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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


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

CSS

body{
  background:#000
}

JavaScript

Highcharts.chart('container', {

  series: [{
    data: [72, 76, 81, 86, 90, 112, ]
  }, {
    data: [7.2, 5.70, 4.40, 3.0, 3.8, 2.4]
  }, ],

  chart: {
    type: 'spline',
    backgroundColor: "transparent",
    events: {
      load: function() {

        var valNum = this.series[0].data.length

        this.series[1].points[0].update({
          dataLabels: {
            enabled: true,
            color: "#fff",
          }
        });
        this.series[1].points[valNum - 1].update({
          dataLabels: {
            enabled: true,
            color: "#000",
          }
        });

        this.update({
          series: [{
            type: 'column',
            name: "Headline Rents (€ psm)",
            yAxis: 1,            
          }, {
            index: 1,
            name: "Vacancy Rate",
            color: '#C39D78',
            marker: {
              enabled: false
            },
          }, ]
        });



      }
    }
  },
  credits: {
    enabled: false,
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ["2012", "2014", "2016", "2018", "2020", "Q2'22", ],
    lineColor: '#fff',
    labels: {
      style: {
        fontSize: '16px',
        fontWeight: '400',
        color: '#fff'
      },
    },
    title: {
      enabled: false,
    }
  },
  yAxis: [{
    opposite: false,
    title: {
      text: ''
    },
    max: 7.8,
    min: 0,
  }, {
    opposite: true,
    title: {
      text: ''
    },
    max: 115,
    min: 0,
  }],

  legend: {
    enabled: true,
    align: 'left',
    verticalAlign: 'bottom',
    x: 0,
    y: 0,
    itemStyle: {
      color: '#fff',
      fontSize: '16px',
      fontWeight: '400',
    },
    itemHoverStyle: {
      color: '#fff'
    },
    symbolPadding: 0,
    symbolWidth: 0,
    symbolHeight: 0,
    squareSymbol: false,
    useHTML: true,
    labelFormatter: function() {
      if (this.name === 'Headline Rents (€ psm)') {
        return `<div><div style="width: 0;height: 10px;border-left: 20px...