Highcharts set yAxis labels width

Question

Is it possible to set the labels width or other option, so the graph will not move/adjust when label's value is changed.

yAxis: {
        title: { text: '' },
        useHTML: true,
        labels: {
            formatter: function() {
                return '<div class="yAxisCustomLabel">' + moneySign + this.axis.defaultLabelFormatter.call({
                    axis: this.axis,
                    value: this.value
                }) + '</div>';
            }
        }
    }

I tried to make a custom class and add style, but no success, maybe because it's part of svg.

Answer 1

You can set marginLeft which can give yAxis room enough.

Here is an example with maginLeft: 200;

 Highcharts.chart('container', { chart: { type: 'line', borderWidth: 1, plotBorderWidth: 1, marginLeft: 200 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { labels: { format: 'this is a very long label' } }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y; } }, plotOptions: { }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div>