CODEWITHSUNDEEP
chart.jsscatter-plotscatter
Giovanni
Giovanni

Reputation: 79

Chart js scatter graph labels

I have a scatter graph using Chart.js and in the X axes I have time values (I use Moment.js). The problem is that I want the scale reversed (see the image) but it doesn't work with the 

scales: {
        xAxes: [{
            type: 'time',
            ...
            ticks: {
                reverse: true
             },

So I need to use the linear type. The problem is that with the linear time in the X axes I see the seconds and what I want are the seconds in 'mm:ss' format, so I think I need to use labels.

The question is: how can I use the labels for the x axes in the scatter plot graph? graph image

Upvotes: 1

Views: 1667

Answers (1)

jordanwillis
jordanwillis

Reputation: 10705

That is surprising that it doesn't work since the reverse option is a base config item (not specific to any certain scale). When I'm back at a computer I will investigate if this is a bug.

In the meantime, you can use the tick callback option to format your labels. Here is an example.

scales: {
        xAxes: [{
            ticks: {
                // Create mm:ss labels
                callback: function(value, index, values) {
                    return moment.duration(value, 'seconds').format('mm:ss'); 
                }
            }
        }]
    }

Upvotes: 1

Related Questions