I'm using the highchart library and try to display some datalabels with a dinamic format ( using the formatter mecanism).
I need to hide some of the labels, but any try to remove it let the background and the border color visible.
as seen in this JSFiddle (They are still some little yellow circles)
code :
formatter:function() {
if(this.y > 150)
return this.y;
else
return "";
}
By returning "" I set the label empty. I would like it to be entirely hidden but its not.
The question is:
Is there a way to hide some datalabels from the formatter ?
I know I could set the datalabels enabled or not for each point in the chart initialisation but I need to change it at run time dynamicaly.
Replace return "" with return null and datalables wil be correct.
Related
I've enabled the legend on a amCharts v4 chart with the following code but I have issues with ellipsis:
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 11;
// Truncate long labels (more than 160px)
chart.legend.labels.template.maxWidth = 160;
chart.legend.labels.template.truncate = true;
chart.legend.labels.template.fullWords = true;
// Set custom ellipsis as default one is not displayed correctly
chart.legend.labels.template.ellipsis = "...";
// Set tooltip content to name field
chart.legend.itemContainers.template.tooltipText = "{name}";
As you can see I had to set a custom ellipsis property because Firefox v76 displayed €| instead of … on the truncated legend labels. It happens even on the sample on the amChart website but, surprisingly, not if I open the same URL in a private tab... How can I fix that?
Then I would like to display the tooltip on the legend only for truncated labels. Adding an adapter:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
// 'text' here contains the non-truncated string
return "My modified " + text;
})
of course works, but how can I identify inside the adapter code if the label that I'm processing is truncated and clear the text variable? It doesn't make sense to display tooltips for non-truncated legend items.
Not sure the most ideal way but...
You get the text inside the adaptor callback.
You can add a text.length check like:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
// 'text' here contains the non-truncated string
return text.length > someValyeBasedOnMaxwidth> ? "My modified " + text: "";
})
I found the answer about the tooltip adapter; this works:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
if (!target.dataItem.label.isOversized) {
// Legend label is NOT truncated, disable the tooltip
return "";
}
// Legend label is truncated, display the tooltip
return text;
})
Still I don't know why the ellipsis are not displayed correctly without setting the property...
https://www.amcharts.com/demos/date-based-line-chart/
In above have a LineSeries Chart with positive and negative values with different line colors but tooltip have only negative value color.
Can this possible to have positive line have different color of tooltip and negtive have another tooltip color?
Yes, it's totally possible.
Firstly, to adjust the background color of a tooltip, you'll need to kill its default behavior of grabbing color information from the calling object (in this case it gets the fill from the series). That's done via:
series.tooltip.getFillFromObject = false;
Then to adjust the background:
series.tooltip.background.fill = // color here
To switch its background color based on the value it's showing, one way we can do that is use an adapter for the series' tooltipText, because when that triggers we know the tooltip is being shown and/or changing. In there we can detect the current dataItem being sourced, check the value, and adjust the tooltip's background fill accordingly.
Sample code:
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = "blue";
series.adapter.add("tooltipText", function(tooltipText) {
if (series.tooltipDataItem.dataContext.visits < 0) {
series.tooltip.background.fill = "red";
} else {
series.tooltip.background.fill = "blue";
}
return tooltipText;
});
Demo:
https://codepen.io/team/amcharts/pen/913514e19a189c8779e07ffcae861ce3
I'm using DotNet.HighCharts and am very pleased with what it enables me to do so far. However, I cannot get it to position labels on the inside of a donut / pie chart. It appears that the distance attribute is not available for the DataLabels. Does anyone have a workround?
Alternatively, does anone know how to write text onto the top of a chart at a specific position (relative to the container of course)?
It's possible to use Distance property in the DataLabels:
DataLabels = new PlotOptionsPieDataLabels
{
Formatter = "function() { return this.y > 5 ? this.point.name : null; }",
Color = Color.White,
Distance = -30
}
Also you can see how is used in the sample project. Download from here: http://dotnethighcharts.codeplex.com/releases
I have highchart like this.
How can I display the legend (Firefox,IE,chrome...) text in next row if the text is too long? Image describing my problem is
P.S. I am not familiar with jQuery.
Expecting a solution
You will need to make use of a labelFormatter
labelFormatter: function()
{
var legendName = this.name;
var match = legendName.match(/.{1,10}/g);
return match.toString().replace(/\,/g,"<br/>");
}
I have made an edit to the fiddle and you can find it Here. It pushes the legend item text to next line after every 10 characters. Guess this is what you needed.Hope this helps.
When styling a chart axis, a common style in publications is to include the unit or percentage sign only on the topmost label of the Y-axis. I am trying to figure out how to do this in Highcharts.
I know I can hard-code a number, like this:
yAxis: {
labels: {
formatter: function() {
if ( this.value == 12 ) {
return this.value + "%";
} else {
return this.value;
}
}
},
But this is not a very flexible solution.
Is there a way to test for the first (or nth) value displayed? Is there a way to get the index of a value within the formatter function?
2013 Update
This works in most circumstances:
if ( this.value == this.axis.getExtremes().max )
return this.value + '%';
else
return this.value;
However, it does not work if you have yAxis.endOnTick set to false—because in that case the maximum value of the axis is not the same as the highest label on the axis.
Is there a way to get that highest label from within the formatter function?
As far as I know, it isn't possible to find the 'nth' item on an axis, but first and last can be dome using the properties this.isFirst and this.isLast' in stead of checkingthis.value`
If you want to, you can also access the axis itself directly using this.axis, so you should be able to run whatever complex logic you want on the axis itself..
With 4.2.x version of highchart I have achieved it with following code
labels: {
formatter: function () {
if(this.isFirst)
return this.value + "%";
else
return this.value;
}
}
}
You could also add [%] to the name of the yAxis. Then you wouldn't have to tamper with the ticks.
You can draw at max value plotLine and after extremes are changed - remove and add new one). Then label for that plotLine you can set as '%' and move to the left side.
Another solution is to use axis title - set it to top and remove rotation.
The last solutions (or rather workaround) is to use second yAxis, and set there min and max(or tickPositions), and show only last label, and first hide.