klabo developer
Posts: 6
Joined: Fri Feb 15, 2019 12:24 am

Waterfall Usage: add subtext of the graph

Hello
I want to display text at the top of the graph using waterfall.
Image


I want to display partly like this image, but can I set it with the current specification?

Best regard.
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Waterfall Usage: add subtext of the graph

Hi,

Welcome to our forum and thanks for contacting us!
The simplest way is to use Highcharts SVG Renderer: https://api.highcharts.com/class-refere ... derer#text

You can loop through all points, get their (x, y) positions and render proper text above the point like this:

Code: Select all

chart: {
    type: 'waterfall',
    events: {
      load: function() {
        var chart = this,
          	text;
        chart.series[0].points.forEach(function(point) {
          text = chart.renderer.text(
              point.name, // text
              chart.plotLeft + point.plotX, // x
              chart.plotTop + point.plotY // y
            )
            .attr({zIndex: 1})
            .add()
          text.translate( // (-50%, -50%)
            -text.getBBox().width / 2,
            -text.getBBox().height / 2
          )
        })
      }
    }
  },
Let me know if you have any further questions ;)

jsFiddle: https://jsfiddle.net/BlackLabel/p06smjha

API Reference: https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... nt#getBBox

Best regards!

edit: internal note: If you'd like to make your text responsive, you can use redraw event. Feel free to ask if you need some more info.
Rafal Sebestjanski,
Highcharts Team Lead
klabo developer
Posts: 6
Joined: Fri Feb 15, 2019 12:24 am

Re: Waterfall Usage: add subtext of the graph

Hello,
Thanks for answering and demo.
I'll give it a try!

I'll let you know if I have any questions!

Thank you for your follow up.
Best regards!
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Waterfall Usage: add subtext of the graph

Sure, I'll be here!
Rafal Sebestjanski,
Highcharts Team Lead
klabo developer
Posts: 6
Joined: Fri Feb 15, 2019 12:24 am

Re: Waterfall Usage: add subtext of the graph

Hello
I tried it and it worked!
Thank you!

However, as you changed the size of the window, these texts did not move like any other graph.

How do these texts behave like graphs when changing the window size?
Or can you only reload text when changing window size?

Resize: Before
Image

Resize: After
Image
Best regards.
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Waterfall Usage: add subtext of the graph

Hi,

In my very first post above I added info about this:
edit: internal note: If you'd like to make your text responsive, you can use redraw event. Feel free to ask if you need some more info.
You need to use the chart.events.redraw event. The idea is to render text, then to destroy it on every window resize and render the same text again in the new place.

You can find examples of it here on the forum. I am sure that similar answers are on StackOverflow as well. But if you will not be able to do it yourself, let me know and I will prepare a simple example of it for you.

Useful API: https://api.highcharts.com/highcharts/c ... nts.redraw
https://api.highcharts.com/class-refere ... Renderer#g
https://api.highcharts.com/class-refere ... er#destroy

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
klabo developer
Posts: 6
Joined: Fri Feb 15, 2019 12:24 am

Re: Waterfall Usage: add subtext of the graph

Hello,
Thanks for answering!
And Sorry for overlooking!

I tried it but it did not work. . . I guess the method was wrong.
But I tried it with the code below and it worked!

Code: Select all

...
chart: {
    type: 'waterfall',
    events: {
      load: function () {
        renderGraphOnText(this);
      },
      resize: function () {
        $('.highchartsText').remove();
        renderGraphOnText(this);
      }
    }
  },
 ...
  
 renderGraphOnText = function (chart) {

  var text;
  chart.series[0].points.forEach(function (point) {
    if (point.fixedcosts) {
      text = chart.renderer.text(
        text, // text
        chart.plotLeft + point.plotX, // x
        chart.plotTop + point.plotY // y
      )
      .attr({ zIndex: 1 })
      .addClass('highchartsText').add()
      text.translate( // (-50%, -50%)
        -text.getBBox().width / 2,
        -text.getBBox().height / 2
      )
    }
  })
}
It was very helpful to reply immediately!
Best regards!
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Waterfall Usage: add subtext of the graph

Hi!

Here you have a working example:

Code: Select all

render: function() {
        var chart = this,
          text;

        if (chart.textGroupSVG) {
          chart.textGroupSVG.destroy();
        }

        chart.textGroupSVG = chart.renderer.g('textGroupSVG').add();

        chart.series[0].points.forEach(function(point) {
          text = chart.renderer.text(
              point.name, // text
              chart.plotLeft + point.plotX, // x
              chart.plotTop + point.plotY // y
            )
            .attr({
              zIndex: 1
            })
            .add(chart.textGroupSVG)
          text.translate( // (-50%, -50%)
            -text.getBBox().width / 2, -text.getBBox().height / 2
          )
        })
      }
I used render event.
jsFiddle: https://jsfiddle.net/BlackLabel/0kd6xL3j

Let me know if you have any additional questions.

Best regards!

edit: oh, sorry, I missed that you managed to do this on your own. I thought your code didn't work. Well done!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”