Search code examples
javascripthtmlhighchartselectron

Chart title with useHTML doesn't format properly on first load

When I am creating a new chart, I am using an image for the title like this:

title: {
    useHTML: true,
    text: "<img src='https://abload.de/img/logo0tjrw.png' alt='' />",
    align: 'left'
    },

When I first run the program, the title is not aligned properly unless the window gets resized, then the title snaps into the correct position.

First load: enter image description here

Second load or browser window resized: enter image description here

Here is a jsfiddle as an example: https://jsfiddle.net/7e2wbshm/1/

Solution

  • For proper image positioning, ensure to specify its size:

      title: {
    useHTML: true,
    text: "<img src='https://abload.de/img/logo0tjrw.png' height='100'/>",
    align: 'left',
  },

    Demo: https://jsfiddle.net/BlackLabel/83oedsjg/

    As an additional tip: For optimal display on Retina monitors, consider setting your image resolution to twice the size while halving the dimensions. This adjustment ensures optimal clarity and sharpness.

    For further details, check out: https://stackoverflow.blog/2022/12/27/picture-perfect-images-with-the-modern-element/#h3-7f5bfcb8aa9a0