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.

That I was not able to add that Aggeregate text below xaxis labels — Sai Babu B, Nov 16 '19 at 09:30
if that helps, don't forget to upvote & mark it as the correct answer! — mukesh.kumar, Nov 16 '19 at 10:31

mukesh.kumar · Accepted Answer · 2019-11-16T10:29:06.583

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"
    }
  }
}

Thank you very much. That worked. But one thing missing is we want to specify that the title should start from which tick and end at which, can we do that, Just like the image I added it should span from b to f. — Sai Babu B, Nov 16 '19 at 20:54

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

1 Answers1

EDIT:

Old Answer