A chart in the tooltip is not being fully rendered

1
votes

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.

enter image description here

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).

enter image description here

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.

enter image description here

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.

1
javascripthighcharts
Could you reproduce this issue in an online code editor like jsfiddle? – Wojciech Chmiel
@WojciechChmiel please, have a look jsfiddle.net/tobilko/6yxmz59s – Andrew Tobilko

1 Answers

2
votes

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:

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: