I am using React and have a Chart Component as follows :

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Highcharts from 'highcharts'; 
import HighchartsReact from 'highcharts-react-official'; 

const Chart = ({url}) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get(url).then(json => setData(json.data.options))
  }, [url])
  
  return <HighchartsReact containerProps={{ style: { height: '90%' } }} highcharts={Highcharts} options={data} />;
  
  } 

export default Chart;

This is a simple implementation and will pass through a JSON from what is the public folder for now but which will in time probably be an API call. What is returned is a JSON with the options that is pre-prepared on the server side. An example is :

{
    "options": {
        "plotOptions": {
            "series": {
                "animation": false
            },
            "column": {
                "pointPadding": 0.0,
                "groupPadding": 0.1
            }
        },
        "title": {
            "text": "Otherwise Unclassified Income Over Time (£)",
            "style": {
                "color": "rgb(25,25,25)",
                "fontSize": "0.9em"
            }
        },
        "xAxis": {
            "categories": [
                "Apr-21",
                "May-21",
                "Jun-21",
                "Jul-21",
                "Aug-21",
                "Sept-21",
                "Oct-21",
                "Nov-21",
                "Dec-21",
                "Jan-22",
                "Feb-22",
                "Mar-22",
                "Apr-22",
                "May-22",
                "Jun-22",
                "Jul-22",
                "Aug-22",
                "Sept-22",
                "Oct-22",
                "Nov-22",
                "Dec-22",
                "Jan-23",
                "Feb-23",
                "Mar-23",
                "Apr-23",
                "May-23",
                "Jun-23",
                "Jul-23",
                "Aug-23",
                "Sept-23",
                "Oct-23",
                "Nov-23",
                "Dec-23",
                "Jan-24",
                "Feb-24",
                "Mar-24",
                "Apr-24",
                "May-24",
                "Jun-24",
                "Jul-24",
                "Aug-24",
                "Sept-24",
                "Oct-24",
                "Nov-24",
                "Dec-24",
                "Jan-25",
                "Feb-25",
                "Mar-25",
                "Apr-25",
                "May-25",
                "Jun-25",
                "Jul-25",
                "Aug-25",
                "Sept-25",
                "Oct-25",
                "Nov-25"
            ],
            "crosshair": true,
            "gridLineWidth": 1,
            "labels": {
                "format": null,
                "style": {
                    "color": "rgb(25,25,25)",
                    "fontSize": "0.6em"
                },
                "step": 1
            },
            "plotBands": [
                {
                    "id": "activemonth",
                    "from": 43.5,
                    "to": 44.5,
                    "color": "rgb(255,192,0,0.2"
                }
            ]
        },
        "yAxis": [
            {
                "labels": {
                    "format": "£{value:,.0f}",
                    "style": {
                        "color": "rgb(25,25,25)",
                        "fontSize": "0.6em"
                    },
                    "step": 0
                },
                "title": {
                    "text": "Income",
                    "style": {
                        "color": "rgb(25,25,25)",
                        "fontSize": "0.7em"
                    }
                },
                "opposite": false,
                "height": null,
                "top": null,
                "offset": 0,
                "max": null,
                "min": 0,
                "tickPixelInterval": 22
            }
        ],
        "tooltip": {
            "shared": true
        },
        "series": [
            {
                "name": "Other Income",
                "type": "column",
                "marker": {
                    "enabled": false
                },
                "color": "rgb(98,225,239,0.8)",
                "yAxis": 0,
                "data": [
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    1000.0,
                    0.0,
                    0.0,
                    5000.0,
                    0.0,
                    0.0,
                    5500.0,
                    0.0,
                    0.0,
                    50.0,
                    31.65,
                    0.0,
                    0.0,
                    0.0,
                    4.75,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0,
                    0.0
                ],
                "tooltip": {
                    "valuePrefix": "£",
                    "valueSuffix": ""
                },
                "lineWidth": 1,
                "stacking": "normal",
                "dashStyle": null
            }
        ],
        "legend": {
            "itemStyle": {
                "color": "rgb(25,25,25)",
                "fontSize": "0.7em"
            },
            "itemDistance": 5,
            "alignColumns": false
        },
        "chart": {
            "plotBackgroundColor": "rgb(247,253,255)",
            "animation": false
        }
    }
}

This will load correctly BUT initially on the screen it will show a default Highcharts implementation including the words ‘Chart Title’ which will then flicker off as the true options are loaded. This does not happen if I don’t make an API call and hard-code some options in on the React side. As you navigate around it is fast loading the charts and it is 24ms delay on the Network traffic as its running locally but the ‘Chart Title’ keeps popping up which is messy.

I have tried setting an initial state on the options to see if I could change the text ‘Set Title’ to empty text but it makes no difference.

Has anyone else experience this and found any work around for this out the box wrapper or is it likely that the next steps are to move away from this wrapper which whilst very simple isn’t quite doing what it said on the tin? The delay is too brief to notice and will stay brief as its such a simple task, but those words ‘Chart title’ need to disappear somehow.

No one else seems to be having this same problem which may just be an issue with search engines no longer giving great results or it may be something unique about the exact implementation (I’m wondering if Axios is part of the issue given no one else seems to be experiencing the same thing).

Have tried initial states and to see if there are additional paramters to use with the wrapper but there isn’t much to try given that this is the basic starting point which I’d hoped would just work out the box given how simple it is.