Render title with dynamic html in highcharts

Question

I have to add an number in space behind the chart. Something like this

Here is the Fiddle

Here is my code

  title: {
    text: title,
    align: 'left',
    x: 10,
    style: {
      color: '#000000',
      fontSize: '20px',
      fontWeight: '600',
      lineHeight: '29px'
    },
  },
  subtitle: {
    text: subtitle,
    align: 'left',
    x: 10,
    style: {
      color: '#4A4A4A',
      fontSize: '14px',

    },
    y: 50,
  },

How I can I do this?

Just add a `` to your container: http://jsfiddle.net/khrismuc/kwtzsd7o/ — , Feb 27 '19 at 11:35
You can do the same thing with vanilla JS. When you say "render title with dynamic html", what exactly do you mean by that? — , Feb 27 '19 at 11:40

score 0 · Accepted Answer · answered Feb 27 '19 at 11:40

You can add text using Highcharts.SVGRenderer.text. Check the code and demo posted below.

Code:

  chart: {
    type: 'areaspline',
    width: 300,
    height: 275,
    events: {
      load: function() {
        var chart = this,
          number = 853;

        chart.renderer.text(number, 50, 70)
          .css({
            color: '#8b8bff',
            fontSize: 26,
            fontWeight: 'bold'
          })
          .add()
          .toFront();
      }
    }
  }

Demo:

http://jsfiddle.net/BlackLabel/kqay3e7g/1/

API reference:

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

Render title with dynamic html in highcharts

1 Answers1