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: 350
  },

  title: {
    text: 'Some text'
  },

  xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
  },

  yAxis: {
    title: {
      text: 'Title y'
    }
  },

  plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }
      },
      point: {
        events: {
          mouseOver: function() {
            var point = this,
              chart = point.series.chart,
              allSeries = chart.series,
              category = point.category;
            allSeries.forEach(series => {
              series.points.forEach(point => {
                if (point.category === category) {
                  point.update({
                    opacity: 0.2
                  }, false)
                }
              })
            })
            chart.redraw()
          },
          mouseOut: function() {
            var point = this,
              chart = point.series.chart,
              allSeries = chart.series,
              category = point.category;
            allSeries.forEach(series => {
              series.points.forEach(point => {
                point.update({
                  opacity: 1
                }, false)
              })
            })
            chart.redraw()
          }
        }
      }
    },
    column: {
      groupPadding: 0.1,
      pointPadding: 0.1,
      borderWidth: 0
    }
  },

  series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
  }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
  }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
  }]

});