Chartjs Responsive

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

Answer 1

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.

Answer 2

User1126057398 posted

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

Answer 3

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

Answer 4

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