.
\nCould any one help me to achieve this. Thanks in advance.
\n","author":{"@type":"Person","name":"Manoj Rejinthala"},"upvoteCount":1,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"You can place the title dynamically in the render
event, for example:
chart: {\n events: {\n load: function() {\n var yAxis = this.yAxis[0],\n title = yAxis.axisTitle,\n firstTick = yAxis.ticks[yAxis.tickPositions[1]];\n\n title.attr({\n y: firstTick.label.xy.y\n });\n\n }\n }\n }\n
\nLive demo: https://jsfiddle.net/BlackLabel/30c26hgx/
\nAPI Reference: https://api.highcharts.com/highcharts/chart.events.render
\n","author":{"@type":"Person","name":"ppotaczek"},"upvoteCount":1}}}Reputation: 542
I am developing application using angular and very new to this high charts. I have requirement where we should place the title next to first marker of bar chart and values are dynamic . here is the existing code https://jsfiddle.net/manoj_rejinthala1510/698mhz2k/3/ .
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: {
text: '<b>Target</b>',
rotation: 0
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
type: 'area',
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]
},
{
type: 'line',
data: [50,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,200,]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
I want to achieve like i mention in attachment. .
Could any one help me to achieve this. Thanks in advance.
Upvotes: 1
Views: 287
Reputation: 39139
You can place the title dynamically in the render
event, for example:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0],
title = yAxis.axisTitle,
firstTick = yAxis.ticks[yAxis.tickPositions[1]];
title.attr({
y: firstTick.label.xy.y
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/30c26hgx/
API Reference: https://api.highcharts.com/highcharts/chart.events.render
Upvotes: 1