HighCharts: How to display unique text for yAxis Label in a spline chart

2
votes

In a spline chart i want to show different texts as yAxis label

Currently i am only able to render the same text for all the data values

https://jsfiddle.net/thushara07/oty094Lb/27/

yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function () {
           return 'test' ;

            }
        }
    }

Expected results: for y-axis labels in the spline chart, show different texts instead od point. value

2
javascripthighcharts

2 Answers

2
votes

You can try highcharts label format

Try this:

var labelsList = ["Very Low", "Low", "Medium", "High", "Very High"];
Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [1,2,3,4,5,6]
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function (e) {
              switch(true) {
                case (e.value <= 5): 
                  return labelsList[0];
                case (e.value <= 10): 
                return labelsList[1];
                case (e.value <= 15): 
                  return labelsList[2];
                case (e.value <= 20): 
                  return labelsList[3];
                case (e.value <= 30): 
                  return labelsList[4];
             }
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
    series: [{
        name: 'Tokyo',
        marker: {
            symbol: 'square'
        },
        data: [ {
        		name:'test1',
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }, {
            y: 26.5,
            marker: {
                symbol: 'square'
            }
        },{
            y: '',
            marker: {
                symbol: 'square'
            }
        },{
            y: 5,
            marker: {
                symbol: 'square'
            }
        },{
            y: 5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }]

    }, {
        name: 'Mumbai',
        marker: {
            symbol: 'square'
        },
        data: [ {
            y: 26.5,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }, {
            y: 26.5,
            marker: {
                symbol: 'square'
            }
        },{
            y: '',
            marker: {
                symbol: 'square'
            }
        },{
            y: 10,
            marker: {
                symbol: 'square'
            }
        },{
            y: 10,
            marker: {
                symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
            }
        }]

    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
0
votes

You can create some external data set and refer to it from the function:

var customLabels = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6', 'test7'],
    label,
    counter = 0;

Highcharts.chart('container', {
    ...,
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            formatter: function() {
                label = customLabels[counter];
                counter++;

                if (this.isLast) {
                    counter = 0;
                }

                return label;
            }
        }
    },
});

Live demo: https://jsfiddle.net/BlackLabel/7tdabr84/