Chartjs-How to show text as a series on a chart in Javascript?

by

1👍

✅

You can do this in HighCharts by using a scatter series type. You would give all points the same y value such that they appear in the single line across the chart:

data: [{x: 0, y: 50, name: 'D'},{x: 2, y: 50, name: 'A'},{x: 3, y: 50, name: 'G'},{x: 4, y: 50, name: 'D'},{x: 5, y: 50, name: 'G'},{x: 6, y: 50, name: 'F'}]

You can then modify the points to not render (no marker):

    plotOptions: {
        scatter: {
            marker: {
                radius: 0,
                states: {
                    hover: {
                        enabled: false,
                    }
                }
            },
...

Then make so that the label shown is that of the note and not the y value:

    dataLabels: {
        enabled: true,
        borderRadius: 5,
        backgroundColor: 'rgba(252, 255, 197, 0.7)',
        borderWidth: 1,
        borderColor: '#AAA',
        y: -6,
        formatter: function() {
            var s = this.point.name;
            return s;
        }
    },

You would also need to hide the tooltip if you want. I did it brute force in the example by not showing any tooltips. You may want to include the note series in your legend or not – I disabled it.

Formatting of the dataLabel is very basic but you can style as needed.

Here is working jsFiddle.

1👍

In Highcharts, the easiest way is to use annotations module:

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

Docs: https://www.highcharts.com/docs/advanced-chart-features/annotations-module

You can also use any type of series with right positioned data labels:

Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                var points = this.series[0].points;
                Highcharts.each(points, function(point) {
                    point.dataLabel.attr({
                        y: 20
                    });
                });
            }
        }
    },
    series: [{
        color: 'rgba(0,0,0,0)',
        zIndex: 0,
        dataLabels: {
            enabled: true
        },
        data: [1, 4, 5, 2, 1, 7]
    }]
});

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

Leave a comment