I am trying to add fontawesome icons in Highcharts sankey charts for nodes and links using formatters which is not working as expected.
Below is what I have tried.
I added nodeFormatter and formatter which returns a markup ( used a React component and returned a markup out of it). Adding an fontawesome icon isn't showing up here.
Sankey Highcharts
If someone did something similar, can you please let me know if I am missing something here.
One options to set is dataLabels.useHTML to true when you want to use font awsome in formatter.
dataLabels: {
enabled: true,
useHTML: true,
nodeFormatter: function () {
const ll = renderToStaticMarkup(
<CustomLabel name={this.point.name} weight={10} />
);
console.log("element rendered ", ll);
return ll;
},
formatter: function () {
const ll = renderToStaticMarkup(
<CustomLabel name={this.point.weight} weight={50} />
);
console.log("element rendered ", ll);
return ll;
}
},
Demo: https://codesandbox.io/s/highcharts-react-demo-forked-6807sy
Related
Hi I am trying bold the labels as per the attached image in the the code base with calculation with percentage as shown
https://codepen.io/SophTooke/pen/ExorZZj
[enter code here][2]
Try use dataLabels.formatter to edit dataLabels, and style inside CSS but remember to set dataLabels.useHTML.
plotOptions: {
sankey: {
dataLabels: {
useHTML: true,
formatter: function() {
let chart = this,
weight = chart.point.weight;
return `Weight: <span>${weight}</span>`
}
},
}
},
Demo:
https://codepen.io/sebastian-hajdus/pen/BarjMap
API References:
https://api.highcharts.com/highcharts/series.sankey.dataLabels.formatter
https://api.highcharts.com/highcharts/series.sankey.dataLabels.useHTML
I've migrated from Highcharts 6.2.0 to latest (8.1.0 ) and found incompatibility since then.
I noticed that this exists since v7.0.0.
I can't handle the fontSize of YAxis and the label text of the xAxis.
Working scenario v6.2.0
Unworking scenario v7.0.0+
Basically what I do in this example :
yAxis : display font-size as 4px (ugly of course but to be sure we see the difference b/w working and not working)
xAxis : change the text be displaying for example only the first 3 characters of the label. In my real scenario I have a graphic showing flaticons as label and flaticons+text in table (graphic data are based on table to be generated) and so in the export I'd like to see only the text as I got issue with html flaticons to be rendered in the reporting.
Based on highchart's doc, I don't understand what I'm doing wrong....unless doc hasn't been updated and this functionality (to customize our axis) is not gone.
I'm using Chrome/FF and no highchart export server.
Thanks for your help.
Thank you for sharing it.
It seems like a regression. I reported it on the Highcharts Github issue channel.
Please follow this thread here: https://github.com/highcharts/highcharts/issues/13492
If you need a temporary workaround - ask in the comment under the above link. The core developers should respond to you soon after.
EDIT
As a temporary workaround enable these options in the load callback and trigger the axes updates.
Demo: https://jsfiddle.net/BlackLabel/cprbz1ym/
chart: {
type: 'area',
events: {
load() {
if (this.renderer.forExport) {
this.yAxis[0].update({
labels: {
style: {
fontSize: '4px'
}
},
title: {
style: {
fontSize: '4px'
}
}
});
this.xAxis[0].update({
labels: {
style: {
fontSize: '4px'
},
formatter: function() {
return this.value.substring(0, 2);
}
}
})
}
}
}
},
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle
My issue is as following:
I've created a custom tooltip with formatter callback function and had set useHTML attribute to be true.
The problem with useHTML is that it is not respecting z-indexing, and the result is that whenever i zoom in the chart (when the reset zoom button actually appears), the reset button's text gets covered by the tooltip's text.
tooltip: {
useHTML: true,
followPointer: true,
formatter: function() {
return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br/>sdsdsddddddddddddssd</b>';
}
}
check this fiddle: http://jsfiddle.net/sahar_rehani/R5Ep4/
try zooming in and then get the tooltip closest to the reset zoom button :)
please help!!!
There's a hacky way to change Highcharts tooltip zIndex:
chart.tooltip.label.attr({zIndex: 300});
Try jsfiddle
Simply remove useHTML: true line and your problem is resolved!. I know it is not the perfect solution but will do the job. z-index issues are very common when you mix svg and html. I will follow up if i find a better solution. You don't need useHTML: true to do the formatting that you are doing.
tooltip: {
followPointer: true,
formatter: function() {
return '<b>sSsSsSsSsSsSsssssssssssssssssssssS<br />sdsdsddddddddddddssd</b>';
}
},
jsfiddle
I only want to know if it's possible delete, or don't show, the frame in the middle of Gauge Chart that contains the value (below pivot). I got more than one serie and values overlap each other.
Thanks!!
One way is, you can format your datalabels and return nothing in the formatter () function.
dataLabels: {
formatter: function () {
var kmh = this.y,
mph = Math.round(kmh * 0.621);
}
}
Fiddled version. (tweaked from Highchart demo sample )
Hope this is you need.
Another option is
dataLabels: false
Documentaion: Gauge DataLabels enabled