Highcharts: Dynamically (programmatically) assign the axis name

Question

I am trying to add programmaticallya string to the x axis, instead than declaring it in the chart creation.

So for example, I have my chart:

$.(document).ready(function{) {
    chart=new Highcharts.Chart({
        chart:{
            renderTo: 'container',
            type: 'line'
        }
    yAxis: {
        title: { text: 'theYaxis'}
    }
    series: [1,2,3,4]
    });
});

Now I want to change the yAxis title, so I create a small function; so it will look like this:

var titleY;

function loadme(){

    $.get('names.csv', function(data){
        var lines= data.split('\n');
        titleY=lines[0].split(','[0];
    });
}

$.(document).ready(function{) {
    chart=new Highcharts.Chart({
        chart:{
            renderTo: 'container',
            type: 'line'
        }
    yAxis: {
        title: { text: titleY}
    }
    series: [1,2,3,4]
    });
    loadme();
});

This will result in the title being empty.

I am checking to be sure that the value is correctly retrieved, using console.log, and the value is collected and printed. What is wrong here? I get the same issue if I populate the $.get function with data that I want to add to the series in the chart: the data is never add to the chart, even if it is correctly retrieved.

Rahul Gupta Rahul Gupta · Accepted Answer · 2014-07-01T04:26:17

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.

Highcharts: Dynamically (programmatically) assign the axis name

2 Answers