Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

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

CSS

body{
  background:#000
}

JavaScript

$('#container').highcharts({
  credits: {
    enabled: false,
  },
  chart: {
    type: "spline",
    backgroundColor: "transparent",
  },
  title: {
    text: ""
  },
  subtitle: {
    text: ""
  },
  /*yAxis: {
    //min: 0,
    max: 11,
    tickInterval: 0.5,
    gridLineWidth: 0,
    labels: {
      enabled: false,
    },
    title: {
      text: ''
    },
  },*/
  yAxis: [{
    opposite: false,
    title: {
      text: 'big numbers'
    },
    max: 100,
    min: 0,
  }, {
    opposite: true,
    title: {
      text: 'little numbers'
    },
    // tickInterval: 2,
    max: 10,
    min: 0,
  }],
  xAxis: {
    categories: ["2012", "2014", "2016", "2018", "2020", "Q2'22", ],
    lineColor: '#fff',
    labels: {
      style: {
        fontSize: '16px',
        fontWeight: '400',
        color: '#fff'
      },
    },
    title: {
      enabled: false,
    }
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function(e) {
          e.preventDefault();
        },

      },
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }

      },
    },
    spline: {
      enableMouseTracking: false,

    },
    column: {
      enableMouseTracking: false,
      dataLabels: {
        enabled: true,
        style: {
          fontSize: '18px',
          color: '#fff',
          fontWeight: '500',
          textShadow: false
        },
      }
    }
  },

  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 === 'Rent Growth') {
        return `<div><div style="width:40px;height:20px;background-color:...