0

the goal is to replace native Google Charts labels with icons. Doing:

google.visualization.events.addListener(chart, 'ready', function () {

    const chartLayout = chart.getChartLayoutInterface(),
          chartBounds = chartLayout.getChartAreaBoundingBox();

    for (let i = 0; i < chartData.getNumberOfRows(); i++) {

        console.log(chartLayout)

        const axisLabelBounds = chartLayout.getBoundingBox(`vAxis#0#label#${i}`),
              thumb = container.appendChild(document.createElement('img'));

        console.log(axisLabelBounds)

        thumb.src = chartData.getProperty(i, 0, 'icon');
        thumb.style.position = 'absolute';
        thumb.style.width = '16px';
        thumb.style.height = '16px';
        thumb.style.zIndex = '1';
        thumb.style.top = axisLabelBounds.top - 8 + 'px';
        thumb.style.left = axisLabelBounds.left - 25 + 'px';

    }
});

chart.draw(chartData, getBarChartOptions({
    title: null
}))

It works great on macOS and Linux:

{left: 36.75, top: 111.890625, width: 0.25, height: 277.21875}

But not on Windows:

{left: 0, top: 0, width: 0, height: 0}

Same browser, the latest Chrome. Any ideas?

Thanks a lot!

Seva
  • 665
  • 1
  • 7
  • 17
  • If this is svg try using `getBBox()` instead. – enxaneta Jul 07 '20 at 14:10
  • when is this code run in relation to chart being drawn? for example, is this code run in the `'ready'` event? – WhiteHat Jul 07 '20 at 14:13
  • @WhiteHat it's ```google.charts.setOnLoadCallback(() => setTimeout(drawChart, 0));``` – Seva Jul 07 '20 at 14:18
  • [getBBox() vs getBoundingClientRect() vs getClientRects()](https://stackoverflow.com/questions/33688549/getbbox-vs-getboundingclientrect-vs-getclientrects#:~:text=getBBox%20is%20defined%20in%20the,the%20outer%20SVG%20coordinate%20system.) – Lain Jul 07 '20 at 14:21
  • need to wait for ready event on the chart. otherwise, it could happen in the other browsers as well. [here is an example](https://stackoverflow.com/a/52222638/5090771)... – WhiteHat Jul 07 '20 at 14:26
  • @WhiteHat yes I wait for the ```ready``` event, updated the question – Seva Jul 07 '20 at 14:33
  • could you possibly share the rest of the chart code and a sample of the data so we may re-produce a working example? this would make it much easier to resolve... – WhiteHat Jul 07 '20 at 17:51

0 Answers0