Question 224852 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Highcharts: how to render chart title with dynamic text and html styling

I can’t believe that Highcharts are so inflexible. I just need a styled title with dates passed as variables. Why is this so complicated?

title: {
        text: '<div><div>Water Consumption by Day of Week</div><div>{`${startDate}` - `${endDate}`}</div></div>',
        useHTML: true
    }```

It didn't work. Any other ideas?
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, realized that Highcharts have a subtitle prop that can be used for the second line. So this works as a temporarily solution:

    title: {
    text: 'Water Consumption by Day of Week'},
subtitle: {
    text: `${startDate} - ${endDate}`

    But if I want to change the color of subtitle text, still not sure how to achieve that.


  2. 0

    You can use title for that purpose, but you need to keep the correct template literals (template strings) syntax. For example:

      title: {
    text: `<div><div>Water Consumption by Day of Week</div><div> ${startDate} - ${endDate}</div></div>`
  }

    Live demo: https://jsfiddle.net/BlackLabel/f5t913mh/

    API Reference: https://api.highcharts.com/highcharts/title.text

    Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search