how to add annotation text to a Highcharts chart? - javascript

We'd like to add some textual annotation to the charts we create using Highcharts.js.
Ideally we would like to show the annotation in a pop-up window when you mouse over the chart title or a question-mark next to the chart title.
For example:
<b>Chart Title</b>
<sup>
?</sup>
However, when I pass the above html as the Highcharts chart title text attribute, Highcharts does not display it properly, it in fact displays the html text.
Is it possible to make this work using Highcharts interface? If so, how?
Any other suggestions would be appreciated.
Thanks.

The following works:
title: {
useHTML: true,
text: 'This is <b>bold</b>'
}
The useHtml property doesn't seem to be in the documentation that I can see but it seems to work for me and it also works on labels

Related

how to customize tooltip in Chart Js?

I want to customize the label of the tooltip on chart js. I just want to show as bold the value of portfolio (+2,5%).
I found this example:
https://jsfiddle.net/nosensus/hhcyhjf9/
When i apply it, my tooltip is always on the left bottom, not on the chart.
How can fix it? I am using Chart.js 2.9.4 version and developing with Angular.
tooltip of the chart should be like this
Put the text you would like to be bold between these tags:
<strong>...</strong>
Like below :
tooltip: {
trigger: 'item',
formatter: '<strong>{a}</strong> <br/> {b}:{c}'
},
example

Highcharts axis labels cluttered but after a refresh, it'll be OK

I'm using Highcharts to create a negative-stack according to its document. My language is Persian (Farsi) so I'm using RTL direction overall the project. My problem doesn't limit to negative-stack type, but all charts with xAxis & yAxis.When I open the index.html file at first I'll face with axis labels overlap the chart as you see in the attached image-1, but after a refresh, it will be aligned properly according to the attached image-2.
Attachments:
image-1
image-2
👉 Sample CodeSandBox Link 👈
Looks like it's caused by the fontFamily.
After changing that property, everything works as expected.
chart: {
style: {
fontFamily: "iranyekan"
}
},
Live demo: https://codesandbox.io/s/upbeat-sun-me5m8

Highcharts: Add ONE custom label to yAxis

I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/

Is there any way to show tooltip by default (without hover pie chart) on chartjs

I have implemented the chartjs. And used piechart. Currently tooltip shows on hover. Is there any way to show the tooltip by default?
As I can understand, you want to always show a tooltip for a given data segment
You can use following code snippet:
var pieChart = $("#chartContainer").dxPieChart({
dataSource: data,
series: {}
}).dxPieChart("instance");
pieChart.getSeries().getPointByArg("Second").showTooltip();
See working sample here
And demo here

Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?

I am new to Highcharts.
in this demo:
http://www.highcharts.com/demo/3d-scatter-draggable/gray
when the mouse move on one point, it shows up a tootip (popup) with default format as below:
Reading
x:0
y:4
z:9
I want to change and customize the information content being displayed in the tooltip and want to customize so that it displays content as below:
Reading
longitude:0
latitude:4
depth:9
So, can anyone can help me on this issue of customizing the content of tooltip?
Thank you in advance.
DEMO
You should use tooltip.formatter option for customizing the tooltip display.
code:
tooltip:{
// pointFormat:'{point.x}{point.y}{point.z}'
formatter:function(){
console.log(this);
return '<b>'+this.series.name+'</b><br><b>longitude:</b>'+this.x+'<br><b>latitude:</b>'+this.y+'<br><b>depth:</b>'+this.point.options.z;
}
},

Categories

Resources