Как увеличить мой div onClick () в моем файле jsp?

Question

Я рисую 4 диаграммы в своем файле jsp, и мне нужно увеличить их, когда я нажимаю;

Так что, если вы знаете, как это сделать ??

Я слышал, что это возможно в javaScript, но я не знаю как ??

Это мой код:

<div id="chartContainer" style="height:270px; width:500px;margin-right: 110px" onclick="bigger()"></div>
<Script>
window.onload = function() { 


var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    title: {
        text: ""
    },
        axisX: {
        title: "Clients",
                  //tickLength: 0,
                  labelFormatter: function(e){
                return  "" ;
            }
    },
    axisY: {
        title: "Chiffre d'affaire annuel"
    },
    data: [{
        type: "column", //change type to bar, line, area, pie, etc
        //showInLegend: "true",
                //legendText: "{label}",
        toolTipContent: "{label}: <strong>{y}</strong>",
        //indexLabel: "{label} {y}%",
                dataPoints: ${data}
    }]
});
chart.render();
}
</Script>

Я хочу такой вывод

Answer 1

Если размер вашего Canvas JS .Chart определяется заполнением созданного вами контейнера DIV, то решением будет добавить прослушиватель onclick для элемента DIV, а затем передать функцию, которая изменяет .style.width и .style Значения .height.

let bigger = () => {
    document.getElementById("chartContainer").style.width = "800px";
}

Измените значение 800 на любое значение и добавьте аналогичную строку для .height.