Search code examples
javascripthtmlgoogle-visualization

Google chart not display x and y legend

So... my problem is that the google chart is not displaying the bottom legend and vAxis values.

It should have, for example, on the left red box, the values 100, 200, 300...

And the bottom should have (orange box) "Solar energy" and (red line) "solar consumption" written on it.

google chart

I am printing it on jsPDF plugin, so its a hidden container, i cant display it on the screen

The html:

<div id="chart_div" style="display: none;"></div>

The js:

google.charts.load('current', {
    packages: ['corechart', 'controls']
}).then(function () {
    var dataChart1 = new google.visualization.DataTable();
    dataChart1.addColumn('string', 'Mês');
    dataChart1.addColumn('number', 'Fora Ponta');
    dataChart1.addColumn('number', 'Geração Solar');
    dataChart1.addRows([
        ['JAN', 0, 0],
        ['FEV', 1, 1],
        ['MAR', 2, 2],
        ['ABR', 3, 3],
        ['MAI', 4, 4],
        ['JUN', 5, 5],
        ['JUL', 6, 6],
        ['AGO', 7, 7],
        ['SET', 8, 8],
        ['OUT', 9, 9],
        ['NOV', 10, 10],
        ['DEZ', 11, 11]
    ]);

    var optionsChart1 = {
        titlePosition: 'none',
        vAxis: {title: 'Valores'},
        hAxis: {
            format: 'decimal'
        },
        legend: {
            position: "bottom"
        },
        seriesType: 'bars',
        series: { 1: { type: 'line' } },
        height: 300,
        width: 800,
        colors: ['orange', 'red']
    };

    chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataChart1, optionsChart1);
});
Solution

  • After a few tests, i manage to work it out removing:

    display:none;

    from my chart div and adding:

    position: absolute;z-index: -1;

    So it will not appear on the screen and still avoid the bug of not showing the legend correctly because of the hidden content.