Home Forums Chart Support Bar chart auto adjust width height

Bar chart auto adjust width height

Viewing 2 posts - 1 through 2 (of 2 total)
  • #23031

    I have plotted a bar chart. It will have different data based on input.the data size might be 1 or 2 or anything.I want a bar chart to be re-adjusted in terms of width and height dynamically based on data size.can someone help me in this ?



    By default, Chart takes the size of its container(if set). So you can just set the width and height of the chart-container in which you are rendering the chart as shown below:
    <div id="chartContainer" style="height: 300px; width: 100%;">

    If you like to change the height of the chart keeping the dataPointWidth as constant, you can update the height of chart as shown in the below code snippet.

    function handleChartHeight(chart){    
        var dpsWidth = 30;
        var plotAreaHeight = chart.axisX[0].bounds.height;
        var chartHeight = plotAreaHeight + (2.5 * dpsWidth);
        chart.options.dataPointWidth = dpsWidth;
        chart.options.height = chartHeight;

    Please take a look at this JSFiddle for complete code.

    Dynamic chart with dynamic width and height

    Priyanka M S
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.