d3.js - Highcharts - timeseries chart with y-axis values need to be group with text labels

Question

Need to show y-axis values(as text labels) and it should be grouped as mentioned below and x-axis should be date-time.

• Poor - > 20

• Bad -value 11 to 20

• Good - value 1 to 10

so there will be 3 ticks/labels for y-axis - good, bad and poor

http://jsfiddle.net/Wk7sF/

$('#container').highcharts({ chart: { type: 'line' },

    xAxis: {
        type:  "datetime"
    },

    series: [
        {
            data: [[1611319680000,4],[1611319860000,5],[1611320040000,11],[1611320220000,14],[1611320400000,1],[1611320580000,22],[1611320760000,19],[1611320940000,20],[1611321120000,9],[1611321300000,9]]
           
        },
        ]
});

Please if anyone can guide me for this problem

question from:https://stackoverflow.com/questions/65848397/highcharts-timeseries-chart-with-y-axis-values-need-to-be-group-with-text-labe

Answer 1

You can map your y-data to values: 3 - 'Poor', 2 - 'Bad', 1 - 'Good' and use formatter function for labels to render a specific text. Example:

const data = [
    [1611319680000, 4],
    ...
];
const categories = ['', 'Good', 'Bad', 'Poor'];

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },

    xAxis: {
        type: 'datetime'
    },

    yAxis: {
        min: 0,
        max: 3,
        labels: {
            formatter: function() {
                return categories[this.pos];
            }
        }
    },

    series: [{
        data: data.map(el => el[1] > 20 ? 3 : (el[1] > 10 ? 2 : 1))
    }]
});

---

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

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