Reputation:
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.
Upvotes: 0
Views: 1041
Reputation: 45079
You have two options:
axis.setTitle()
- good performance, I advice use that solution for setting titleaxis.update()
- lower performance, because it recreates whole axis, while first method only changes titleUpvotes: 0
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: 2