CODEWITHSUNDEEP
highcharts
ritmatter
ritmatter

Reputation: 3498

Add a Specific Y-Axis Label with Highcharts

I have a graph with a labelled Y-Axis with points 1 through 100. In addition to the regularly spaced labels (0, 10, 20, etc), I want to add a label for an arbitrary point, say 47. Is this possible with highcharts?

Upvotes: 1

Views: 772

Answers (3)

davcs86
davcs86

Reputation: 3935

Based on your comment, you can add a custom tick with tickPositioner function, with a code like this

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            tickInterval: 20, //sets the interval ticks
            tickPositioner: function(){
                var ticks = this.tickPositions; // gets the tick positions
                ticks.push(47); // adds the custom tick
                ticks.sort(function(a, b) {
                    return a - b; // sorts numerically the ticks 
                });
                return ticks; // returns the new ticks
            }
        },
        series: [{
            data: [29.9, 71.5, 86.4, 29.2, 44.0, 76.0, 93.5, 98.5, 16.4, 94.1, 95.6, 54.4]
        }]
    });
});

JSFiddle demo

Upvotes: 0

duffn
duffn

Reputation: 3760

You can add a specific line to the yAxis with the plotLines option.

yAxis: {
    plotLines: [{
        value: 47,
        color: 'rgb(216, 216, 216)',
        width: 1,
    }]
},

http://jsfiddle.net/nicholasduffy/wa6ukyyp/1/

EDIT:

This seems a bit of a hack, but you could fake the label.

yAxis: {
    plotLines: [{
        value: 47,
        color: 'rgb(216, 216, 216)',
        width: 1,
        label : {
            text: '47',
            x: -30,
            y: 2
        }
    }]
},

http://jsfiddle.net/nicholasduffy/wa6ukyyp/2/

Upvotes: 1

ritmatter
ritmatter

Reputation: 3498

I think the solution I found that comes closest is to create a line of zero thickness and label the line:

    plotLines: [{
      value: cutoff,
      color: 'rgb(216, 216, 216)',
      width: 0,
      label: {
        text: 'label_name',
        style: {
          color: 'grey',
          fontweight: 'bold'
        }
      }
    }],

The label_name goes pretty close to the Y-Axis, and it gets the point across without putting a tooltip onto the graph

Upvotes: 0

Related Questions