Clipped Scatter chart

[Néstor Olimpo Franco Fierro]

Problem description:

     I have a scatter chart of 1200px width by 400px height, however, when rendered into browser is clipped at 600px width. Also the min value for hAxis is not respected (is always 0). The method for drawing the chart is as follows:

function dibujaGráfica(tabla,lambda){

    let data= new google.visualization.DataTable();

    data.addColumn('number',lambda?'λ nm': 'px');

    data.addColumn('number','Transmitancia: T');

    data.addRows(obtenRenglones(tabla,lambda));

    let options={

        width:1200,

        height:400,

        title:'Transmitancia',

        hAxis:{title:lambda?'λ nm':'px', minValue:lambda?250:0, maxValue:lambda?1200:600,gridlines:{count:13} },

        vAxis:{title:'Transmitancia', minValue:0, maxValue:1},

        interpolateNulls:true,

        series:{

            0: { lineWidth: 1, pointSize: 0.1 },

            allowPointSelect:true

        },

    };

    chart = new google.visualization.ScatterChart(Γ('gráfica'));

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

        var selección=chart.getSelection();

        if(selección.length){

            let row=selección[0].row;

            pixelTarget.value=data.getValue(row,0);

        }

    });

    chart.draw(data, options);

}

lambda is a boolean variable that indicates if the instrument "is calibrated" and switches units from pixels to nanometers as you can see on

the titles. This is working ok.

tabla it is the data (x & y values for the chart), but it is formatted to google chart needs by the method obtenRenglones().

The container for the chart:

<div id="gráfica" style="width: 1200px; height: 400px;position:relative;top:550px;left:0px;"></div>

Here is the output of the chart... truncated at 600px.

[Néstor Olimpo Franco Fierro]

Problem solved:

     I had a CSS class for a generic SVG component with restrictions of size; however a Google chart is rendered as an SVG component and therefore inheriting the sizing restrictions. I renamed the generic SVG class and make it as .clipped class and the problem was solved. And for the last issue, I used instead of minValue: hAxis.viewWindow.min property.

Regards