Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'column',
    height: 270

  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    type: 'category',
    labels: {
      style: {
        color: 'rgba(43, 48, 52, 0.4)',
        fontWeight: 'bold',
        fontFamily: 'Inter UI'
      }
    }
  },
  yAxis: {
    gridLineWidth: 0,
    min: 20,
    max: 100,
    distance: 20,
    tickInterval: 20,
    labels: {
      style: {
        color: 'rgba(43, 48, 52, 0.4)',
        fontWeight: 'bold',
        fontFamily: 'Inter UI'
      }
    },
    title: {
      text: ''
    }

  },
  legend: {
    enabled: false,

  },
  plotOptions: {
    // column: {
    //       states: {
    //           hover: {
    //           shadow: {
    //           color: 'rgba(0, 0, 0, 0.2)',
    //           offsetX: 1,
    //           offsetY: 10,
    //           opacity: '0.2',
    //           width: 10
    // 			},                                                 
    //           }
    //       }
    //   },
    series: {
      borderWidth: 0,
      // pointWidth:120,
      groupPadding: 0,
      pointPadding: 0.08,

      dataLabels: {
        enabled: false,
        format: '{point.y:.1f}%'
      },
      point: {
        events: {
          mouseOver: function() {
            var chart = this.series.chart,
              r = chart.renderer,
              borderWidth = 2,
              x, y;

            x = this.plotX + chart.plotLeft + (this.pointWidth / 2);
            y = this.plotY + chart.plotTop + borderWidth;

            chart.pointShadow = r.path(['M', x, y, 'L', x, y + this.shapeArgs.height - borderWidth])
              .attr({
                zIndex: 3,
                'stroke-width': borderWidth,
                'stroke': 'gray'
              })
              .add()
          },
          mouseOut: function() {
            this.series.chart.pointShadow.destroy()
          }
        }
      },
      color: {
        linearGradient: {
         ...