CODEWITHSUNDEEP
javascriptplothighcharts
David
David

Reputation: 327

Add a gap between the second and third series in a Highcharts column plot with four series displayed

I have a Highcharts column plot that shows four series.

I would like series one and two to be touching each another (the two blue ones), then have a small gap, and then have series three and four touching each another (the orange ones). Can this be done?

I haven't found a way to do it myself, and can't find an example on here or by searching on Google. Is anyone able to offer any suggestions?

$(function() {
  var chart;
  var defaultTitle = "CT doses";
  var protocolNames = ['Abdomen', 'Chest', 'Sinus'];
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        events: {
          drilldown: function(e) {
            parentSeriesIndex = e.point.series.index;
            parentSeriesName = e.point.series.name;
            chart.setTitle({
              text: ''
            });
            chart.yAxis[0].setTitle({
              text: 'Number'
            });
            if (parentSeriesName.indexOf('DLP') != -1) {
              chart.xAxis[0].setTitle({
                text: 'DLP range (mGy.cm)'
              });
            }
            if (parentSeriesName.indexOf('CTDI') != -1) {
              chart.xAxis[1].setTitle({
                text: 'CTDI range (mGy)'
              });
            }
            chart.xAxis[0].setCategories([], true);
            chart.tooltip.options.formatter = function(args) {
              if (this.series.name.indexOf('DLP') != -1) {
                returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
              } else {
                returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
              }
              return returnValue;
            };
            chart.yAxis[1].update({
              labels: {
                enabled: false
              },
              title: {
                text: null
              }
            });
          },
          drillup: function(e) {
            chart.setTitle({
              text: defaultTitle
            }, {
              text: ''
            });
            chart.yAxis[0].setTitle({
              text: 'DLP (mGy.cm)'
            });
            chart.yAxis[1].setTitle({
              text: 'CTDIvol (mGy)'
            });
            chart.xAxis[0].setTitle({
              text: ''
            });
            chart.xAxis[1].setTitle({
              text: ''
            });
            chart.xAxis[0].setCategories(protocolNames, true);
            chart.xAxis[0].update({
              labels: {
                rotation: 90
              }
            });
            chart.yAxis[1].update({
              labels: {
                enabled: true
              },
              title: {
                text: 'CTDIvol (mGy)'
              }
            });
          }
        }
      },
      title: {
        text: 'CT doses'
      },
      xAxis: [{
        title: {
          useHTML: true
        },
        type: "category",
        labels: {
          useHTML: true,
          rotation: 90
        }
      }, {
        title: {
          useHTML: true
        },
        type: "category",
        opposite: true,
        labels: {
          useHTML: true,
          rotation: 90
        }
      }],
      yAxis: [{
        min: 0,
        title: {
          text: 'DLP (mGy.cm)'
        }
      }, {
        title: {
          text: 'CTDIvol (mGy)'
        },
        opposite: true
      }],
      legend: {
        align: 'center',
        verticalAlign: 'top',
        floating: true,
        borderWidth: 0,
        y: 70
      },
      tooltip: {},
      plotOptions: {
        column: {
          borderWidth: 0,
          groupPadding: 0.2,
          pointPadding: 0
        }
      },
      series: [{
        name: 'Mean DLP',
        color: '#2b8cbe',
        data: [{
          name: 'Abdomen',
          y: 150,
          drilldown: 'AbdomenDLP'
        }, {
          name: 'Chest',
          y: 73,
          drilldown: 'ChestDLP'
        }, {
          name: 'Sinus',
          y: 20,
          drilldown: 'SinusDLP'
        }],
        tooltip: {
          valueSuffix: ' mGy.cm'
        }
      }, {
        name: 'Median DLP',
        color: '#7bccc4',
        data: [{
          name: 'Abdomen',
          y: 140,
          drilldown: 'AbdomenDLP'
        }, {
          name: 'Chest',
          y: 63,
          drilldown: 'ChestDLP'
        }, {
          name: 'Sinus',
          y: 15,
          drilldown: 'SinusDLP'
        }],
        tooltip: {
          valueSuffix: ' mGy.cm'
        }
      }, {
        name: 'Mean CTDI',
        color: '#d7301f',
        data: [{
          name: 'Abdomen',
          y: 57.2,
          drilldown: 'AbdomenCTDI'
        }, {
          name: 'Chest',
          y: 25.8,
          drilldown: 'ChestCTDI'
        }, {
          name: 'Sinus',
          y: 43.4,
          drilldown: 'SinusCTDI'
        }],
        tooltip: {
          valueSuffix: ' mGy'
        },
        yAxis: 1
      }, {
        name: 'Median CTDI',
        color: '#fdcc8a',
        data: [{
          name: 'Abdomen',
          y: 52.2,
          drilldown: 'AbdomenCTDI'
        }, {
          name: 'Chest',
          y: 20.8,
          drilldown: 'ChestCTDI'
        }, {
          name: 'Sinus',
          y: 38.4,
          drilldown: 'SinusCTDI'
        }],
        tooltip: {
          valueSuffix: ' mGy'
        },
        yAxis: 1
      }],
      drilldown: {
        series: [{
          name: 'Abdomen DLP',
          id: 'AbdomenDLP',
          data: [
            ['up to 150', 4],
            ['up to 200', 2],
            ['up to 250', 1],
            ['up to 300', 2],
            ['up to 350', 1]
          ]
        }, {
          name: 'Chest DLP',
          id: 'ChestDLP',
          data: [
            ['up to 100', 40],
            ['up to 110', 21],
            ['up to 120', 24],
            ['up to 130', 32],
            ['up to 140', 64]
          ]
        }, {
          name: 'Sinus DLP',
          id: 'SinusDLP',
          data: [
            ['up to 130', 4],
            ['up to 140', 2],
            ['up to 150', 6],
            ['up to 160', 7],
            ['up to 170', 9]
          ]
        }, {
          name: 'Abdomen CTDI',
          id: 'AbdomenCTDI',
          xAxis: 1,
          data: [
            ['up to 20', 4],
            ['up to 22', 9],
            ['up to 24', 12],
            ['up to 26', 8],
            ['up to 28', 2]
          ]
        }, {
          name: 'Chest CTDI',
          id: 'ChestCTDI',
          xAxis: 1,
          data: [
            ['up to 10', 4],
            ['up to 12', 9],
            ['up to 14', 12],
            ['up to 16', 8],
            ['up to 18', 2]
          ]
        }, {
          name: 'Sinus CTDI',
          id: 'SinusCTDI',
          xAxis: 1,
          data: [
            ['up to 14', 4],
            ['up to 16', 9],
            ['up to 18', 12],
            ['up to 20', 8],
            ['up to 22', 2]
          ]
        }]
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Upvotes: 7

Views: 158

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

You need to use pointPlacement option with number value. For example: http://jsfiddle.net/9phfzewj/34/

Play around with values, which in my case are -0.1 for lefts and 0.1 for rights. As long as series.grouping is enabled, pointPlacement refers to the previous series position.

Upvotes: 2

Related Questions