Charts.js - Bubble chart with two word axis

Question

I need to create a bubble chart style chart which has two axis, both which are words rather than text.

In my example I want:

• axis x to be colours, e.g. red, blue, Yellow
• axis y to be cars, e.g. small car, medium car, big car

from this I want to plot how many of each car was ordered, e.g. if 2 small red cars were ordered and one big blue car was ordered there would be a bubble on small red which is twice the size of the bubble at big blue.

I have done a bit with charts.js, but none of my examples cover how to use text instead of numbers.

Any help would be greatly appreciated with this, I have looked through the documentation here.. enter link description here, but have not been able to get anything to work.

Thanks in advance.

Answer 1

I've recently had the same requirement for a dataset and utilised the callback function for each axis in the scale option. I populated the list of values for the labels into an array and then used the index of the point to perform a lookup to rename the tick label.

var colours = ["Red", "Blue", "Green", "Yellow"];
var carSizes = ["Small", "Medium", "Large"];

// Small Red = 10
// Small Green = 14
// Medium Yellow = 23
var dataPoints = [{x: 0, y: 0, r: 10}, {x: 2, y: 0, r: 14}, {x: 3, y: 1, r: 23}

var myBubbleChart = new Chart(bubbleCtx, {
            type: 'bubble',
            data: dataPoints,
            options: {
                title: {
                    display: true,
                    text: "Car Orders"
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            stepSize: 1,
                            callback: function (value, index, values) {
                                if (index < carSizes.length) {
                                    return carSizes[carSizes.length - (1 + index)]; //this is to reverse the ordering
                                }
                            }
                        },
                        position: 'left'
                    }],
                    xAxes: [{
                        ticks: {
                            stepSize: 1,
                            callback: function (value, index, values) {
                                if (index < colours.length) {
                                    return colours[index];
                                }
                            }
                        },
                        position: 'bottom'
                    }]
                }
            }
        });

After much trial and error, I found it necessary to set the step size to 1 otherwise the chart would get skewed with data appearing outside the gridlines.

If you are not setting the data dynamically and know the minimum and maximum values for each axis, you can set the min and max attributes for the ticks and specify the axis type as 'category'.

yAxes: [{
    type: 'category',
    ticks: {
        stepSize: 1,
        min: 'Small',
        max: 'Large'
    },
    position: 'left'
}]

Answer 2

You can use line type chart with bordercolour radius 0. it will act as line chart and avoid line. It will appeared like bubble chart.