[SOLVED] Highcharts: add custom text bottom left, like credits?

Highcharts: add custom text bottom left, like credits?

Highcharts can have a customized credits section; and that also has an alignment.

I would like to have both a url on the bottom-right, and a custom text (i.e. the current date/time) on the bottom-left.

What would be the best way to add that, keeping the same look-and-feel as the credits?

Solution

Use the SVGRenderer tool to render a custom text.

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

Check the included demo.

EDIT:

Here is a simple example how you can achieve it: https://jsfiddle.net/BlackLabel/x3om10L8/

chart: {
  events: {
    render() {
      let chart = this,
        credits = chart.credits,
        creditsBB = credits.getBBox();


      if (chart.customLabel) {

        // keep label responsive
        chart.customLabel.destroy();
      }

      chart.customLabel = chart.renderer.label('my custom text', 0, creditsBB.y - 5).css(credits.styles).add();
    }
  }
},

API: https://api.highcharts.com/highcharts/chart.events.render