score:1

A bar series in Highcharts with a small modification will be a nice solution to create such a chart. The left side images can be added as x-axis categories. Example:

(function(H) {
    H.wrap(H.seriesTypes.column.prototype, 'translate', function(proceed) {
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        this.points.forEach(point => {
            point.shapeArgs.height = 8;
        });
    });
})(Highcharts);

Highcharts.chart('container', {
    series: [{
        pointPadding: 0,
        groupPadding: 0,
        borderRadius: 6,
        type: 'bar',
        data: [{
                x: 0,
                y: 21,
                color: 'orange'
            },
            ...
        ]
    }],
    xAxis: {
        gridLineWidth: 1,
        lineWidth: 0,
        labels: {
            useHTML: true,
            x: 15
        },
        categories: [
            '<img src="https://www.highcharts.com/samples/graphics/sun.png">',
            ...
        ]
    }
});

Live demo: http://jsfiddle.net/BlackLabel/qotzdehL/

API Reference: https://api.highcharts.com/highcharts/xAxis.labels


Related Articles