How to add custom content that spans across multiple ticks in highcharts

Question

I have a requirement in our application to develop something like below.

I was able to achieve everything except that "Aggregate" text at ticks. Here is the code to fiddle with.

series: [{
    upColor: 'green',
    color: 'red',
    data: [{
        name: 'a',
        y: 60
    }, {
        name: 'b',
        y: 100
    }, {
        name: 'c',
        y: 50
    }, {
        name: 'd',
        isIntermediateSum: true,
        color: 'blue'
    }, {
        name: 'e',
        y: -20
    }, {
        name: 'f',
        y: -80
    }, {
        name: 'h',
        isSum: true,
        color: 'yellow'
    }],
    dataLabels: {
        enabled: true
    },
    pointPadding: 0
}]

Can any body help me with this.

Thanks in advance.

Answer 1

EDIT:

After trying out different things and searching on Stackoverflow, I was able to achieve that horizontal line as well:

Check this updated fiddle.

Updated Code:

var htmlContent = `<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">Aggregate Value</div>
<div class="flex-child-edge"></div>
</div>`;

Highcharts.chart('container', {
  chart: {
    type: 'waterfall'
  },

  title: {
    text: 'Highcharts Waterfall'
  },

  xAxis: {
    type: 'category',
    tickWidth: 1,
    tickLength: 30,
    title: {
      enabled: true,
      useHTML: true,
      text: htmlContent,

    }
  },

  yAxis: {
    title: {
      text: 'USD'
    }
  },

  legend: {
    enabled: false
  },

  tooltip: {
    pointFormat: '<b>${point.y:,.2f}</b> USD'
  },

  series: [{
    upColor: 'green',
    color: 'red',
    data: [{
      name: 'a',
      y: 60
    }, {
      name: 'b',
      y: 100
    }, {
      name: 'c',
      y: 50
    }, {
      name: 'd',
      isIntermediateSum: true,
      color: 'blue'
    }, {
      name: 'e',
      y: -20
    }, {
      name: 'f',
      y: -80
    }, {
      name: 'h',
      isSum: true,
      color: 'yellow'
    }],
    dataLabels: {
      enabled: true
    },
    pointPadding: 0
  }]
});

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 0px #000 solid;
}

.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>

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

For more info about how to draw horizontal lines see this stackoverflow question.

---

Old Answer

If those horizontal lines are not that priority item,
then you can use title attribute of xAxis to achieve something similar.

Check this Link to the fiddle.

Like this :

xAxis: {
  type: 'category',
  tickWidth: 1,
  tickLength: 30,
  title: {
    enabled: true,
    text: '<b>Aggregate Value<b>',
    style: {
      fontSize: '14',
      color: "#000000"
    }
  }
}