HighStock.js flags tooltip box formatting - javascript

I'm using HighStock.js library and I'm trying to display the flags and their tooltips.
Everything works well, except the tooltip box is too wide that it goes outside of the chart area.
How do I format the box so that its width is set?
I tried the following
plotOptions:
flags:
useHTML:true
tooltip:
followPointer:true
pointFormat:"<div style='width:200px;'>{point.text}</div>"
But nothing changes.

You can set more CSS styles like white-space: pre-wrap, take a look: http://jsfiddle.net/9Pxka/6/

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 Bar Chart - Labels Not Appearing in Bar

I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/
stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.

Highcharts Pie chart datalabels cut off/ positioning

I'm attempting to use a highcharts in conjunction with Bootstrap. The pie chart is placed inside a column of 6 for example, so it takes up half the page. What has been happening is the datalabels are too long and so are being cropped out of the containing div.
A fix that has been proposed for this is to set a width on the datalabels.
like so:
pie: {
size: '60%',
allowPointSelect: true,
dataLabels: {
style:{
width:100
color:'black'
}
}
}
}
This works flawlessly for Chrome and mozilla, the width is set and the position of the datalabel changes so its all drawn closer to the pie chart. But when testing in IE8, (and I have to account for it unfortunately) the width is set, but it appears that the position of the datalabel is not changing, so I get even less of the data label visible on the screen.
I'll try get a jsfiddle or a screenshot up shortly so you can see what I mean, but initially I was just seeing if anyone had come across this issue before, or if there's a simple fix I am just missing.
Jsfiddle
I've commented out the width in the plot options so you can see what's happening.
When I uncomment the width, it renders perfectly in Chrome and mozilla. But in IE8, the position of the label doesn't change, so the left labels end up far away from the pie chart and still cropped.

how to add annotation text to a Highcharts chart?

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

Categories

Resources