Chart.js responsive css size

Question

So I've made this chart.js on my website, but one of my users said: The new bars showing the status for run tests is now too narrow, making it almost impossible to identify which one is hovered over.

How can I make it size better to a 3440x1440 screen, zoom at 100% in Chrome?

Thought about making the css size 80% width, and then no height. So it would fit the page, but then is was a veeeery long graph on a 3440x1440 screen.

The chart is this:

.canvasStyle {         
    height: 400px;
    width: 900px;
}

<div class="row justify-content-center">
    <div class="canvasStyle">
        <canvas id='chart_1' ></canvas>
    </div>
</div>
<script>
    var TestInformation = <?php echo json_encode($TestInformation); ?>;
    var pass            = <?php echo json_encode($pass);            ?>;
    var fail            = <?php echo json_encode($fail);            ?>;
    var error           = <?php echo json_encode($error);           ?>;
    var notrun          = <?php echo json_encode($notrun);          ?>;
    var na              = <?php echo json_encode($na);              ?>;
    var version         = <?php echo json_encode($version);         ?>;
    var title           = <?php echo json_encode($title);           ?>;
    searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na);
</script>

function searchId_chart(title, TestInformation, pass, fail, error, notrun, error, na) {
    // Display the array elements
    window.onload = function() {

        var xValues = TestInformation;

        new Chart("chart_1", {
            type: 'bar',
            data: {
                labels: xValues,
                datasets: [{
                        label: 'Passed',
                        data: pass,
                        backgroundColor: 'rgb(150,238,144)'
                    },
                    {
                        label: 'Failed',
                        data: fail,
                        backgroundColor: 'rgb(204,0,0)'
                    },
                    {
                        label: 'Not Run',
                        data: notrun,
                        backgroundColor: 'rgb(0,109,204)'
                    },
                    {
                        label: 'Error',
                        data: error,
                        backgroundColor: 'rgb(204,112,0)'
                    },
                    {
                        label: 'NA',
                        data: na,
                        backgroundColor: 'rgb(33,33,33)'
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: title
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            stepSize: 1,
                            min: 0,
                            autoSkip: false,
                            display: false
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                            maxTicksLimit: 5,
                            min: 0,
                            beginAtZero: true,
                            userCallback: function(label, index, labels) {
                                if (Math.floor(label) === label) {
                                    return label;
                                }

                            },
                        }
                    }]
                }

            }
        });
    };
}

That's a lot of data... If you actually want to display that much data, why dont you make a div inside the main div with overflow auto, so it fits the screen, but you can scroll through it? If you are interested on that i could elaborate an answer — Sebastian Ciocarlan, Jul 21 '21 at 07:05

Sebastian Ciocarlan · Answer 1 · 2021-07-21T07:33:54.610

Okay there you have it:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
      responsive:true,
      maintainAspectRatio:false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

.overflow-auto-size{
  width:400px;
  heigth:50px;
  overflow:auto;
}
.big{
  width:1000px;
  heigth:50px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
<div class="overflow-auto-size">
    <div class="big">
        <canvas id="myChart"></canvas>
    </div>
</div>

I've found a SO post with this topic. [SO post](https://stackoverflow.com/questions/35854244/how-can-i-create-a-horizontal-scrolling-chart-js-line-chart-with-a-locked-y-axis) — Sebastian Ciocarlan, Jul 21 '21 at 07:23

Chart.js responsive css size

1 Answers1