UnitStepSize for regular time interval with Chartjs

Question

I'm having troubles getting regular 15min time interval with my chart js graph. Here the setup of my xAxis:

xAxes: [{
             type: 'time',
             ticks: {
               maxRotation: 90,
               minRotation: 80
             },
             time: {
               format: 'HH:mm',
               tooltipFormat: 'HH:mm',
               unit: 'minute',
               unitStepSize: 15,
               displayFormats: {
                 'minute': 'HH:mm',
                 'hour': 'HH:mm'
               },
               min: 1502521200000,
               max: 1502553600000
             }
       }]

x data are timestamps: 1502521200000

Incidentally, I want my data frame to start at 1502521200000 and finish at 1502553600000 but the first data point doesn't have a label: Thanks for the help

JSFiddle: https://jsfiddle.net/tn7ksfb6/

remove min and max.. or use correct values or if you want all the range always then "pad" the data by adding (x, undefinied) for the "holes" — user180100
@RC. Thanks RC. The "padding" works but with 10 mins interval instead of 15. Any idea how to force it? — Hetana

Quince Quince · Accepted Answer · 2017-07-25T15:18:03

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>

UnitStepSize for regular time interval with Chartjs

1 Answers