I have the following problem:
I would like to align the text of the legend in the following way:
Legend:
[Color1] Title1:---------------100.000.000€
[Color2] Title23343334:-----100.000.000€
[Color3] Title23343334:------10.000.000€
Do you know how can I do that?
For this you need to set useHTML: true, and define html elements in the labelFormatter function, and set the widths of those elements via CSS.
Example:
http://jsfiddle.net/jlbriggs/yra1rw51/
(there are numerous ways to set up the HTML and CSS to accomplish this - this is just one example)
You can define itemWidth which define static with of each legend item.
Related
Hello Highcharts team!
Qq - I am trying to set line height for multiline annotation in styled mode i.e. set a dy. I know that in non-styled mode it's achieved by setting annotations[0].labels[0].style.lineHeight property docs, but having trouble with how to do that in styled mode. useHTML wont work for me because we utilize exporting module and seems like line breaks are not preserved in downloaded images/svg when useHTML is enabled.
Link to fiddle - https://jsfiddle.net/4vrgysxk/1/
Thanks in advance
I think that the best approach is:
set useHTML as true for the annotation label,
render annotation as HTML element and style it,
set the exporting.allowHTML as true,
Demo: https://jsfiddle.net/BlackLabel/wp3rqmge/
API: https://api.highcharts.com/highcharts/exporting.allowHTML
API: https://api.highcharts.com/highcharts/annotations.labelOptions.useHTML
We are using Highcharts styled mode in our project and very happy about it.
However, css object (inline styles) in certain situations better works for us.
For example, legend.itemStyle property with {textOverflow: undefined, width: "dynamically calculated width"}
I'd like to know if there is a way to "overwrite" styled mode setting only for legend styles or give the inline style higher precedence for this particular situation.
JSFiddle example
Hope it makes sense.
You can set your own custom style for certain elements.
In styled mode, the legend items can be styled with the .highcharts-legend-item class.
Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/legend/
API: https://www.highcharts.com/docs/chart-design-and-style/style-by-css
API: https://api.highcharts.com/highcharts/legend.itemStyle
I search for a way to display a tooltip permanently, when the tooltip is shared. These points are very important:
Click on the point --> tooltip is cloned and displayed permanently
Click on the same point again, the clone is removed
Multiple tooltips are allowed to be displayed at the same time
Thanks.
As Sebastian pointed out in comment - you could clone tooltip.
When tooltip has useHTML set to false (by default it does), then you will only need to clone SVG element. See similar topic: link
When useHTML is set to true then div element is created and appended to container of chart. You will need to clone not only SVG frame, but also HTML's div. Another issue is to check cloned tooltips only by x, because tooltip is shared.
Example: http://jsfiddle.net/7vkZV/14/
When useHTML is true HTML will overflow other SVG elements - to avoid this you could style HTML div with tooltip text and remove visible style in SVG tooltip. In other words - make tooltip in pure HTML.
Example: http://jsfiddle.net/7vkZV/15/
On Highcharts graph, can we show a tool tip when mouse over label
other tool tip than shown when mouse over columns (point)?
thanks
Chanan
I've managed to achieve this - you need two steps:
1.) For the xAxis or yXis, set the labels options; the 'formatter' property should include a html title attribute. Utilise a function for dynamic outputs. Ensure the 'useHTML' property is set to true. eg:
useHTML: true,
formatter: function () {
return '<div class="label_tip" style="font-size:12px; font-weight:500;" title="'+this.value+'">'+this.value+'</div>'; }
2.) Use any tooltip library to alter the titles to a tooltip. This should be triggered in the Highcharts load or redraw event.
In this example I'm using qTips to create the label tooltips - http://jsfiddle.net/amichaels/quXLg/
How can I add tooltips for all cells in one column for instance? I'm using a jmesa table.
I need this because in the cells i've got text like this: 'this is the ...'. On hover I need to display a tooltip with the complete text.
Use a SPAN tag with a TITLE attribute to show the tooltip:
<jmesa:htmlColumn>
<span title='${bean.fullDescription}'>${bean.value}</span>
</jmesa:htmlColumn>