Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="Slide4Chart"></div>

CSS

#Slide4Chart {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

//let redrawingEnabled = true;


  $('#Slide4Chart').highcharts(
  
  
  
  {
    //▼▼▼ UPDATE DATA HERE ▼▼▼
    series: [{
      name: 'CPI',
      data: [ /*CPI*/ 5, /*Logistics*/ 0]
    }, {
      name: 'Core CPI',
      data: [ /*CPI*/ 5, /*Logistics*/ 0]
    }, {
      name: 'Market Rent Growth',
      data: [ /*CPI*/ 0, /*Logistics*/ 21]
    }],
    //▲▲▲ UPDATE DATA HERE ▲▲▲


    chart: {
      height: 370,
      type: 'column',
      backgroundColor: "transparent",
      events: {
        load: function() {
        
        // assign other series values. this cant be added below because it is already called on top with just the data to make updates easier
          this.update({
            series: [{
              color: '#4C9F8B',
              borderColor: '#4C9F8B',
            }, {
              borderColor: '#4C9F8B',
              color: {
                pattern: {
                  color: '#4C9F8B',
                  path: {
                    d: 'M -1 1 l 2 -2 M 0 6 l 6 -6 M 5 7 l 2 -2',
                    strokeWidth: 1
                  },
                  width: 6,
                  height: 6,
                }
              },
              dataLabels: {
                enabled: true,
                backgroundColor: '#fff',
                //borderColor: '#4C9F8B',
                borderWidth: 1,
                verticalAlign: 'middle',
                y: 0,
                style: {
                  fontSize: '16px',
                  fontWeight: '500',
                  color: '#000',
                  textShadow: false,
                  textOutline: 'none',
                },
              }
            }, {
              color: '#1b5e5c',
            }]
          });
        }
      }
    },
    title: {
      text: '',
    },
    xAxis: {
      categories: ['CPI', 'Logistics'],
      lineColor: '#000',
      labels: {
        enabled: true,
        style: {
          fontSize: '16px',
          fontWeight: '400',
          color:...