Column range

author(s): Torstein Hønsi

by Black Label

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing ranges using horizontal columns. Each range is represented
        with a low and high value, with a bar between them.
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'columnrange',
  },
  xAxis: [{
    left: '0%',
    width: '33.33%',
    offset: 0,
  }, {
    left: '33.33%',
    width: '33.33%',
    offset: 0,
  }, {
    left: '66.66%',
    width: '33.33%',
    offset: 0,
  }],
  plotOptions: {
    columnrange: {
      grouping: false,
      dataLabels: {
        enabled: false,
        verticalAlign: 'middle',
        inside: true,
        formatter: function(e) {
          if (this.y > 0) {
            return this.y;
          }
        }
      },
      events: {
        legendItemClick: function() {
          let name = this.name.substring(this.name.length - 1, this.name.length);

          let _i = this._i;
          this.chart.series.forEach(function(p, i) {
            if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
              (!p.visible) ? p.show(): p.hide()
            }
          })
        }
      }

    }
  },
  legend: {
    align: 'left',
    x: 70,
    verticalAlign: 'top',
    y: 40,
    floating: true,
    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false,
    useHTML: true,
    labelFormatter: function() {
      let legendPoints = [
        '<span>Seria 1</span>',
        '<span>Seria 2</span>',
        '<span>Seria 3</span>',
      ];
      return legendPoints[this.xAxis.userOptions.index]
    }
    // labelFormatter: function () {
    //     if(this.userOptions.isLegend){
    //         return this.name;
    //     }else{
    //         this.hide();
    //         return false;
    //     }
    // }
  },

  series: [{
      name: 'A1',
      color: '#E5DDE3',
      xAxis: 0,
      data: [
        [-31, 31],
        [-38, 38],
        [-35, 35],
        [-30, 30],
        [-32, 32]
      ]
    },
    {
      showInLegend: false,
      name: 'B1',
      color: '#BEA9BA',
      xAxis: 0,
      data: [
        [-21, 21],
       ...