Responsive chart

author(s): Torstein Hønsi

by Haze32

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This demo shows how breakpoints can be defined in order to
        change the chart options depending on the screen width. All
        charts automatically scale to the container size, but in this
        case we also change the positioning of the legend and axis
        elements to accomodate smaller screens.
    </p>
</figure>

<div id="button-bar">
    <button id="small">Small</button>
    <button id="auto">Auto</button>
</div>

CSS

body{background:#000}

JavaScript

var chart = Highcharts.chart('container', {

  //▼▼▼ UPDATE DATA HERE ▼▼▼
  series: [{
    data: [72, 76, 81, 86, 90, 112, ] //Headline Rents
  }, {
    data: [7.2, 5.70, 4.40, 3.0, 3.8, 2.4, ] //Vacancy
  }, {
    data: [22] //YOY
  }, ],
  xAxis: {
    categories: ["2012", "2014", "2016", "2018", "2020", "Q2'22", ],
  },
  //▲▲▲ UPDATE DATA HERE ▲▲▲



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

        var
          colChart = this.series[0],
          splineChart = this.series[1],
          valNum = colChart.data.length,
          firstSplinePoint = splineChart.points[0],
          lastSplinePoint = splineChart.points[valNum - 1],
          firstCol = colChart.points[0],
          lastCol = colChart.points[valNum - 1],
          secToLastVal = colChart.points[valNum - 2].y,
          lastVal = colChart.points[valNum - 1].y,
          updown = "",
          //pDif = percentDifference(num1, num2).toFixed(0);
          pDif = this.series[2].points[0].y



        function percentDifference(a, b) {
          return Math.abs(a - b) / ((a + b) / 2) * 100;
        }


        if (secToLastVal > lastVal) {
          updown = '<span style="color:#C12D27">▼-</span> <span style="color:#fff">' + pDif + '% YoY</span>'
        } else {
          updown = '<span style="color:#A5CD27">▲+</span> <span style="color:#fff">' + pDif + '% YoY</span>'
        }

        colChart.update({
            enableMouseTracking: false,
            borderWidth: 0,
            color: "#caced7",
            dataLabels: {
              enabled: true,
              useHTML: true,
              y: 50,
              align: 'center',
              formatter: function() {
                return '€' + this.y;
              },
              style: {
                color: '#000',
                fontWeight: '500',
                textShadow: false,
              },
            }
          }),

          //change column and text color of...