工具提示中的图表未完全呈现

Question

I generate a tooltip with a chart on it.

tooltip: {
    borderRadius: 15,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none',
    useHTML: true,
    shared: true,
    formatter: function() {
        var div = document.createElement('div');

        Highcharts.chart(div, {
            chart: {
                height: 300,
                width: 300
            },
            title: {
                text: 'Title'
            },
            series: [
                {
                    data: [10, 20],
                    color: 'red'
                },
                {
                    data: [20, 10],
                    color: 'green'
                }
            ],
            yAxis: {
                title: {
                    text: 'Quantity'
                }
            }
        });

        return div.innerHTML;
    }
}

Real data example

The main chart is of the line type. The tooltip chart is of the column type.

Dummy data example

The main chart is of the line type. The tooltip chart is of the line type as well. You may see half-visible red and green symbols. They are either hidden by something (I am trying to figure out what it is) or were suddenly stopped being rendered (I highly doubt it).

Do you have any ideas what it could be?

Update 1

I was able to identify the element the series are rendered into. It's there, the size seems correct, it has points rendered.

 <g class="highcharts-series-group" data-z-index="3">...</g>

Though, I couldn't bring it to the front, or make it visible by any CSS means.

That's basically the question. How to bring it to the forward or unhide?

Update 2

I was experimenting with setting the dimensions by both

div.style.width = "500px";

and

chart: {
    height: 300,
    width: 300
}

to no avail.

Update 3

I created a jsfiddle. Please, have a look.

Do you have any ideas? Any thought would be invaluable.

Answer 1

The solution to this issue is quite simple. In the formatter callback function you are returning an innerHTML of a div with a created chart. However, this is not the interactive chart but only HTML.

The chart plot area is hidden because of the animation. Disable it and you will see plotted series:

plotOptions: {
  series: {
    animation: false
  }
}

Demo:

• https://jsfiddle.net/BlackLabel/us4dvgy9/

---

Another solution is to return an HTML div element in the tooltip formatter and then create a chart inside the div using setTimeout. With this approach the animation is working fine.

Code:

formatter: function() {

  setTimeout(function() {
    Highcharts.chart('tooltip', {
      chart: {
        width: 200,
        height: 200,
        type: 'column'
      },
      title: {
        text: 'Title'
      },
      credits: {
        enabled: false
      },
      series: [{
        data: [50, 75],
        color: 'red',
        selected: true
      }, {
        data: [10, 100],
        color: 'green'
      }],
      yAxis: {
        title: {
          text: 'Quantity'
        }
      }
    });
  }, 0);

  return '<div id="tooltip"></div>';
}

Demo:

• https://jsfiddle.net/BlackLabel/rh6pw5s2/