[Chartjs]-UnitStepSize for regular time interval with Chartjs

by

3👍

✅

As @RC suggested remove min and max and then to get the actual step size working use stepSize instead of unitStepSize

let myBubbleData = [{},{},{},{},{},{},{},{},{},{},{},{"x":1502531100000,"y":0.5,"r":3},{"x":1502532000000,"y":0.5,"r":3},{},{},{"x":1502534700000,"y":0.5,"r":6},{"x":1502535600000,"y":0.5,"r":3},{"x":1502536500000,"y":0.5,"r":3},{},{"x":1502538300000,"y":0.5,"r":3},{},{"x":1502540100000,"y":0.5,"r":3},{},{},{"x":1502542800000,"y":0.5,"r":6},{},{},{},{"x":1502546400000,"y":0.5,"r":3},{},{},{},{},{},{},{},{}];

let ctx = document.getElementById('test');
let myBubbleChart = new Chart(ctx,{
        type: 'bubble',
        data: {
            animation: {
                duration: 10000
            },
            datasets: [{
                data: myBubbleData
            }]
        },
        options: {
            responsive: true,
            title:{
                display: true,
                text:'Chart.js Bubble Chart'
            },
            scales: {
                yAxes: [{
                    display: false,
                    position: 'left',
                    ticks: {
                        min: 0,
                        max: 1
                    },
                    gridLines : {
                        display : false
                    }
                }],
                xAxes: [{
                    type: 'time',
                    ticks: {
                        maxRotation: 90,
                        minRotation: 80
                    },
                    time: {
                        format: 'HH:mm',
                        tooltipFormat: 'HH:mm',
                        unit: 'minute',
                        stepSize: 15,
                        displayFormats: {
                            'minute': 'HH:mm',
                            'hour': 'HH:mm'
                        }
                    }
                }]
            }
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<body>
<div>
<canvas id="test"></canvas>
</div>
</body>

Leave a comment