Temperature variation by month

by Black Label

HTML

<script src="https://code.highcharts.com/11.3/highcharts.js"></script>
<script src="https://code.highcharts.com/11.3/highcharts-more.js"></script>
<script src="https://code.highcharts.com/11.3/modules/exporting.js"></script>
<script src="https://code.highcharts.com/11.3/modules/export-data.js"></script>
<script src="https://code.highcharts.com/11.3/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/11.3/modules/pattern-fill.js"></script>

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

CSS

#container {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    //width: 700 // set in CSS
  },
  title: {
    text: ''
  },
  xAxis: {
    categories: ['Beginning/New Acct.', 'Market', 'Deposite/Withdrawl', 'Ending'],
  },
  yAxis: {
    title: {
      text: ''
    },
    labels: {
    	format: '${text}'
    }
  },
  plotOptions: {
    series: {
      borderRadius: '10',
      borderWidth: 1,
      borderColor: 'blue',
      pointWidth: 50,
      dataLabels: {
        enabled: true
      }
    },
    column: {
      dataLabels: {
        format: '${y}'
      }
    },
    columnrange: {
      color: {
        pattern: {
          color: 'blue',
          path: {
            d: 'M 0 0 L 25 10 M 25 10 L 50 0',
            strokeWidth: 1
          },
          width: 50,
          height: 10,
          x: 6
        }
      },
      dataLabels: {
        inside: false,
        yLow: -20,
        formatter: function(e) {
          const item = this;

          if (e.verticalAlign == 'top' && item.point.type == '-') {
            return `${item.point.type}$${item.point.low - item.point.high}`;
          } else if (e.verticalAlign == 'bottom' && item.point.type == '+') {
            return `${item.point.type}$${item.point.high - item.point.low}`;
          }
        }
      }
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    type: 'column',
    pointPlacement: 0.15,
    color: 'transparent',
    data: [
      [0, 1800000]
    ]
  }, {
    type: 'column',
    pointPlacement: -0.15,
    color: 'blue',
    data: [{
        x: 0,
        y: 1000000,
        dataLabels: {
          enabled: false
        }
      },
      [3, 2300000],
    ]
  }, {
    type: 'columnrange',
    data: [{
      x: 1,
      low: 1800000,
      high: 900000,
      type: '-',
    }, {
      x: 2,
      low: 1200000,
      high: 2300000,
      type: '+',
      color: {
        pattern: {
          x: -14
        }
      },
    }]
  }]

});