CODEWITHSUNDEEP
javascripthighcharts
Tomba
Tomba

Reputation: 1743

Change HighCharts axis title

Is it possible to change the axis title of a HighCharts chart programatically?

I'm trying to do something like this:

charts.series[0].yAxis.title.text = 'new title';

or

charts.yAxis[0].title.text = 'new title';

(having already set a title when the chart was initialized).

Upvotes: 25

Views: 34073

Answers (5)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

This can be done directly on the Axis object using setTitle now. For example:

chart.yAxis[0].setTitle({ text: "Bananas" });

See this JSFiddle demonstration. The method signature is:

setTitle(Object title, [Boolean redraw])

So you could optionally pass a boolean to wait with redrawing. The title object takes the same parameters as xAxis.title meaning you could pass in styles and several other options as well as the text itself. The API documentation has the complete information.

Upvotes: 28

Rahul Gupta
Rahul Gupta

Reputation: 10141

I have created a demo fiddle to dynamically change y-axis title. Refer this JSFIDDLE

HTML:

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

<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">

JS (part of thec code to update the y-axis title on a button click):

var chart = $('#container').highcharts();
    $('#my_btn').click(function(){
        //alert('hey');
        chart.yAxis[0].update({
            title:{
                text:"My text"
            }
        });
        alert('Y-axis title changed to "My text" !');
    });

Refer Highcharts 'update' function documentation for further details.

Upvotes: 1

msanteler
msanteler

Reputation: 2183

I couldn't get either of the above to work, perhaps things have changed since last year... I ended up using:

chart.yAxis[0].update({
                title:{
                    text: "new title"
                }
            });

and it worked nicely...

Upvotes: 15

Hauke
Hauke

Reputation: 61

The above answer has still one problem. Images created from the plot using the export module will show the original title, not the changed one. Add the following line to fix:

chart.options.yAxis[0].title.text = 'new title';

Upvotes: 6

escouser
escouser

Reputation: 1943

Yes you can do this by using the following:

chart.yAxis[0].axisTitle.attr({
        text: 'new title'
    });

Upvotes: 34

Related Questions