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
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
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
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/
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
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;
}
},