highcharts - Draw horizontal line outside the chart area

Question

I have a column chart as in the picture below. How do I draw a responsive horizontal line (and label) outside the chart area?

I know we could achieve something similar using plotLines and plotBands but the value has to be the one within the value range in the series, and the line won't be drawn outside the chart either.

In my case, I want to draw the line outside the chart area, specifically under the xAxis (see the line in red color).

Is there a way to do that?

$(function() {
  Highcharts.chart('sd-median-annual-earnings-chart', {
    credits: {
      enabled: false
    },
    chart: {
      type: 'column',
      backgroundColor: null,
      style: {
        fontSize: 'inherit',
        overflow: 'visible',
        width: '100%'
      }
    },
    title: {
      text: 'Median Annual Earnings',
      style: {
        color: '#000',
        fontFamily: 'inherit',
        fontSize: '1.2em',
        fontWeight: 700
      }
    },
    xAxis: {
      categories: [
        'A',
        'B',
        'C',
        'D'
      ],
      labels: {
        overflow: 'justify',
        style: {
          color: '#000'
        }
      },
      tickWidth: 0
    },
    yAxis: {
      min: 0,
      max: 40000,
      gridLineColor: '#d6d6d6',
      title: {
        text: 'Percent',
        style: {
          color: '#FFFFFF',
          fontFamily: 'inherit',
          fontSize: 'inherit'
        }
      },
      labels: {
        overflow: 'justify',
        style: {
          color: '#000'
        }
      },
      tickPositioner: function(min, max) {
        var each = Highcharts.each,
          ticks = [];

        for (var i = min; i <= max; i++) {
          if (i % 5000 === 0)
            ticks.push(i);
        }

        return ticks;
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      symbolRadius: 0,
      itemStyle: {
        color: '#000'
      },
      itemHoverStyle: {
        color: '#86BC25'
      },
      itemMarginBottom: 5
    },
    plotOptions: {
      column: {
        pointPadding: 0,
        borderColor: null,
        dataLabels: {
          enabled: true,
          color: '#000',
          format: "{y}",
          style: {
            textOutline: false
          }
        },
        events: {
          legendItemClick: function() {
            return false;
          }
        }
      },
      series: {
        groupPadding: 0.1
      }
    },
    series: [{
      name: 'A',
      color: '#000',
      data: [10000, 34000, 25000, 6000]
    }, {
      name: 'B',
      color: 'blue',
      data: [5000, 4000, 10000, 20000]
    }, {
      name: 'C',
      color: '#046A38',
      data: [6000, 15000, 5000, 1500]
    }, {
      name: 'D',
      color: 'green',
      data: [8700, 12000, 7000, 15000]
    }]
  });
});

html,
body {
  padding: 0;
  margin: 0px;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="height:450px;width:100%;"></div>

Here is my fiddle: https://jsfiddle.net/Brianing/wtoy7L15/

Deep 3015 Deep 3015 · Accepted Answer · 2018-01-12T06:58:02

Use SVGRenderer to add line and text inside charts

chart: {
  type: 'column',
  backgroundColor: null,
  style: {
    fontSize: 'inherit',
    overflow: 'visible',
    width: '100%'
  },
  events: {
    load: function() {
      var ren = this.renderer,
        stline = ['M', 100, 0, 'L', 340, 0];

      ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
        .css({
          fontSize: '10px',
          color: '#FF0000'
        })
        .add();
      ren.path(stline)
        .attr({
          'stroke-width': 2,
          stroke: '#FF0000'
        })
        .translate(this.chartWidth - 360, this.chartHeight - 50)
        .add();
    }
  }
},

Note works best on fixed sized containers

$(function() {
  Highcharts.chart('sd-median-annual-earnings-chart', {
    credits: {
      enabled: false
    },
    chart: {
      type: 'column',
      backgroundColor: null,
      style: {
        fontSize: 'inherit',
        overflow: 'visible',
        width: '100%'
      },
      events: {
        load: function() {
          var ren = this.renderer,
            stline = ['M', 100, 0, 'L', 340, 0];

          ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
            .css({
              fontSize: '10px',
              color: '#FF0000'
            })
            .add();
          ren.path(stline)
            .attr({
              'stroke-width': 2,
              stroke: '#FF0000'
            })
            .translate(this.chartWidth - 360, this.chartHeight - 50)
            .add();
        }
      }
    },
    title: {
      text: 'Median Annual Earnings',
      style: {
        color: '#000',
        fontFamily: 'inherit',
        fontSize: '1.2em',
        fontWeight: 700
      }
    },
    xAxis: {
      categories: [
        'A',
        'B',
        'C',
        'D'
      ],
      labels: {
        overflow: 'justify',
        style: {
          color: '#000'
        }
      },
      tickWidth: 0
    },
    yAxis: {
      min: 0,
      max: 40000,
      gridLineColor: '#d6d6d6',
      title: {
        text: 'Percent',
        style: {
          color: '#FFFFFF',
          fontFamily: 'inherit',
          fontSize: 'inherit'
        }
      },
      labels: {
        overflow: 'justify',
        style: {
          color: '#000'
        }
      },
      tickPositioner: function(min, max) {
        var each = Highcharts.each,
          ticks = [];

        for (var i = min; i <= max; i++) {
          if (i % 5000 === 0)
            ticks.push(i);
        }

        return ticks;
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      symbolRadius: 0,
      itemStyle: {
        color: '#000'
      },
      itemHoverStyle: {
        color: '#86BC25'
      },
      itemMarginBottom: 5
    },
    plotOptions: {
      column: {
        pointPadding: 0,
        borderColor: null,
        dataLabels: {
          enabled: true,
          color: '#000',
          format: "{y}",
          style: {
            textOutline: false
          }
        },
        events: {
          legendItemClick: function() {
            return false;
          }
        }
      },
      series: {
        groupPadding: 0.1
      }
    },
    series: [{
      name: 'A',
      color: '#000',
      data: [10000, 34000, 25000, 6000]
    }, {
      name: 'B',
      color: 'blue',
      data: [5000, 4000, 10000, 20000]
    }, {
      name: 'C',
      color: '#046A38',
      data: [6000, 15000, 5000, 1500]
    }, {
      name: 'D',
      color: 'green',
      data: [8700, 12000, 7000, 15000]
    }]
  });
});

html,
body {
  padding: 0;
  margin: 0px;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="width: 600px; height: 250px; margin: 0 auto"></div>

highcharts - Draw horizontal line outside the chart area

1 Answers