locked
Chartjs Responsive RRS feed

  • Question

  • User1126057398 posted

    I am trying to make ChartJs responsive but it didnot work. How can one make it responsive?

    Moreover, I am trying to decrease Chart Bar's width but it's not working.

    private void CreateChart(string productName, int productNo)
    {
    String chart = "";
    // You can change your chart height by modify height value
    if (productNo == 1)
    {
    chart = "<canvas id=\"chart-canvaspn1\" width =\"100%\" height=\"30\"></canvas><script>";
    chart += "new Chart(document.getElementById(\"chart-canvaspn1\"),{type: 'horizontalBar', data:{ labels: ['" + productName + "'";
    }
    else
    {
    chart = "<canvas id=\"chart-canvaspn2\" width =\"100%\" height=\"30\"></canvas><script>";
    chart += "new Chart(document.getElementById(\"chart-canvaspn2\"),{type: 'horizontalBar', data:{ labels: ['" + productName + "'";
    }
    chart += "],datasets: [{ data: [";

    // put data from database to chart
    String value = "";
    //for (int i = 0; i < tb.Rows.Count; i++)
    value += (productNo == 1) ? lstCompFoodItm.FirstOrDefault(a=>a.CompareOn== "Calories").FirstItem : lstCompFoodItm.FirstOrDefault(a => a.CompareOn == "Calories").SecondItem;
    // value += (productNo == 1) ? lstCompFoodItm[0].FirstItem : lstCompFoodItm[0].SecondItem;
    // value = value.Substring(0, value.Length - 1);

    chart += value;

    chart += "],label: \"Calories\", borderColor: \"#3e95cd\",backgroundColor: \"#ffc266\", scaleShowGridLines: false,showScale: false,fill: true}"; // Chart color
    chart += "]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}},barthickness:20], yAxes: [{gridLines:{display:false}}]}}"; // Chart title
    chart += "},{ responsive: true});";
    chart += "</script>";

    if (productNo == 1)
    ltChartFirstItemCalorie.Text = chart;
    else
    ltChartSecondItemCalorie.Text = chart;
    }

    Reference: https://codepen.io/anon/pen/bdrGVx

    https://stackoverflow.com/questions/37856729/chart-js-2-how-to-set-bar-width

    Monday, April 8, 2019 10:46 AM

Answers

  • User1126057398 posted

    In order to resize the chart by setting responsive attribute, Chart.js uses its parent container to update the canvas render and display sizes,the canvas size changes can not be done directly from the canvas element.So I had added a div above the chart and set the size.

    You could write as below:

    <div class="chart-container" style="position: relative; height:45vh; width:auto">
        <canvas id="chart"></canvas>
    </div>

    Here is the link 

    https://www.chartjs.org/docs/latest/general/responsive.html?h=size

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 13, 2019 4:23 AM

All replies

  • User288213138 posted

    Hi geetasks:


    According to your description,you can follow the steps below:


        1.About how to set bar width, You can set it based on the value of the barPercentage attribute .

        2.You can see the following code for Chartjs Responsive.
    The code:

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <canvas id="myChart"></canvas>
        <script>
            var data = {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    data: [65, 59, 75, 81, 56, 55, 40],
                }]
            };
    
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }],
                        xAxes: [{
                            barPercentage: 0.2
                        }]
                    }
                }
            });
    
            console.log(myChart);
        </script>

    The Result: 

          


    Best Regard
    Sam.

    Tuesday, April 9, 2019 6:16 AM
  • User1126057398 posted

    Thanks for replying. But I had coded it like you had mentioned. But it's not responsive what can be the issue?

    Wednesday, April 10, 2019 4:24 AM
  • User288213138 posted

    Hi geetasks,


    I think it's the Chartjs version. Did you set the version in Settings? This is my demo link on the code pen:

    https://codepen.io/sawu/pen/bJWeoM

    In the pen Settings, there is an option to set javascript, where you can select the Chart. Js version.

    if your code doesn't work using my version of chart.js according to the code I have provided , please post your code in aspx.


    You can also refer to the link below and hope it helps you.

    https://www.chartjs.org/docs/latest/general/responsive.html

    The Result:

    Best Regard,
    Sam

    Wednesday, April 10, 2019 10:46 AM
  • User1126057398 posted

    In order to resize the chart by setting responsive attribute, Chart.js uses its parent container to update the canvas render and display sizes,the canvas size changes can not be done directly from the canvas element.So I had added a div above the chart and set the size.

    You could write as below:

    <div class="chart-container" style="position: relative; height:45vh; width:auto">
        <canvas id="chart"></canvas>
    </div>

    Here is the link 

    https://www.chartjs.org/docs/latest/general/responsive.html?h=size

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 13, 2019 4:23 AM