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

Question

How would I add a series that is just labels to a chart like the one shown below?

I'm happy to use any charting Javascript library, like ECharts, Chartist, Chartjs. Chartjs would be easiest I think.

Basically I'm trying to write software that automatically creates a graphic score for a song - it outputs one big combined chart, with volume as a line, tone as another, filter cutoff as another line, and chords as text in one horizontal line. There are about 3500 x-axis points (samples in time).

I've looked through all the galleries of all three charting libraries but can't find a way to show text, or even labels on a bar chart and make the bars themselves invisible.

see this: https://stackoverflow.com/questions/20966817/how-to-add-text-inside-the-doughnut-chart-using-chart-js — hossein dindar, Aug 21 '18 at 15:24

score 1 · Accepted Answer · answered Aug 21 '18 at 15:40

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.

score 1 · Answer 2 · answered Aug 22 '18 at 07:43

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/

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

2 Answers2