I am having a pie chart in which have legend at the bottom. i want to add the text at the right side of the pie chart.how to add it?. thank you in advance.
Asked
Active
Viewed 747 times
0
-
You should look at this - https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle – Umesh Dec 16 '19 at 06:27
1 Answers
1
You can use the SVGRenderer feature to render a custom text wherever you want. If you want to have a responsive text I encourage to create it inside the chart.events.render callback, which triggers after each resize.
events: {
render() {
let chart = this,
x,
y;
//check if label exist after window resize
if (chart.label) {
chart.label.destroy();
};
y = 80;
x = chart.clipBox.width - 100;
chart.label = chart.renderer.text('This text is <span style="color: red">styled</span> and <a href="http://example.com">linked</a>', x, y)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
}
Demo: https://jsfiddle.net/BlackLabel/4fzyLn0r/2/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
API: https://api.highcharts.com/highcharts/chart.events.render
Sebastian Wędzel
- 11,417
- 1
- 6
- 16
-
Thanks for your answer @Sebastian Wedzel. i can add the text now but the problem is the text is not responsive while i resizing the screen. – venkatesh karthick Dec 19 '19 at 10:08
-
Are you able to reproduce your case on some online editor which I could work on? – Sebastian Wędzel Dec 19 '19 at 11:02
-
I made it to work after spending some time in this. thank you for answer and reply. – venkatesh karthick Dec 20 '19 at 06:32
-
I have to add some dynamic text from ts file and it is of three to four lines. can it be possible with accomodate the space in the renderer.text? @ Sebastian Wędzel – venkatesh karthick Dec 20 '19 at 14:10
-
set the useHTML to true and set the html
property in the text. https://jsfiddle.net/BlackLabel/Lqdrv4u0/ API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text – Sebastian Wędzel Dec 20 '19 at 15:54