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
Related
I am trying to implement accessibility(keyboard navigation on hover state). When I hover the plot band I can see the tooltip values as given by moverover event. But when I tab into it I can see that the borders are highlighted but no data of hover state(ie.the tooltip) is shown. I have attached fiddle for the same.
events: {
mouseover() {
/* Show usage number on hover for first plot band */
this.label.element.innerHTML = 'RED'
},
mouseout() {
this.label.element.innerHTML = '';
}
}
PS: I have even added zIndex to the plotbands and fill-opacity:0 for the series.
Any help?
https://jsfiddle.net/Delfin_/bad9hfzt/85/
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...
When using color stops in a heatmap, is there a way to have only values other then 0 to be effected and set fields with 0 to white. The only hack I can see is to have stops like this
[0, '#FFFF'],
[0.00001, '#276C91'],
[0.5, '#FDF6A3'],
[1, '#B63132']
Instead of stops, you can use dataClassColor
Determines how to set each data class' color if no individual color is set. The default value, tween, computes intermediate colors between minColor and maxColor. The other possible value, category, pulls colors from the global or chart specific colors array. Defaults to tween.
in combine with dataClasses
An array of data classes or ranges for the choropleth map. If none given, the color axis is scalar and values are distributed as a gradient between the minimum and maximum colors.
You could extend (wrap) the ColorAxis.toColor function to separately handle a value of 0.
For example:
(function (H) {
H.wrap(H.ColorAxis.prototype, 'toColor', function (proceed, value, point) {
if(value == 0)
return '#FF00FF'; // My color
else
return proceed.apply(this, Array.prototype.slice.call(arguments, 1)); // Normal coloring
});
}(Highcharts));
See this JSFiddle demonstration.
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.
Basically i want to use pointPadding with custom bar width (pointWidth) both at the same time. But i can't, here is my problem:
I want a chart with no-padding in the bars of one group when showing grouped chart. For this purpose i used pointPadding: "0" and it shows me exactly right chart. like:
if(chart_json.chart.defaultSeriesType=='column'){
if(chart_json.xAxis.categories.length >= 1 ){
chart_json.plotOptions.column.groupPadding = "0.05";
chart_json.plotOptions.column.pointPadding = "0.00";
}
}
var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
chartObjArray.push(chart);
But when i set my custom width it adds some spaces in between bars of one group.
Actually i want to put max and min limit on bar width, but i can't find any support from Highchart library. So for this purpose when highchart generate the chart, if the generated chart bar width exceeds my max-limit i set it to my max-limit and same for lower limit.
if(chart_json.chart.defaultSeriesType=='column'){
if(chart_json.xAxis.categories.length >= 1 ){
chart_json.plotOptions.column.groupPadding = "0.05";
chart_json.plotOptions.column.pointPadding = "0.00";
}
}
var chart=new Highcharts.Chart(chart_json,startupObj.startupFunction);
chartObjArray.push(chart);
//set bar width
if(chart_json.chart.defaultSeriesType=='column' || chart_json.chart.defaultSeriesType=='bar'){
setChartBarMaxMinWidth(chart,chart_json);
}
setChartContainerWidth(chart_json,chart);
////************************************///////////////////
function setChartBarMaxMinWidth(chart,json){
var maximumBarWidth=70;
var minimumBarWidth=15;
chart_json=eval('('+json.chart_json+')');
for(var j=0;j<chart.series.length;j++){
var series=chart.series[j];
if (series.data[0].pointWidth > maximumBarWidth) {
chart.series[j].options.pointWidth = maximumBarWidth;
isMaxMin='MAX';
}
if (series.data[0].pointWidth < minimumBarWidth) {
chart.series[j].options.pointWidth = minimumBarWidth;
isMaxMin='MIN';
}
};
function setChartContainerWidth(chartOptions,chart){
// calculate # of bars
var numberOfBars=seriesGroupLength*categoriesLength;
// calculate container width
// var containerWidth=numberOfBars*43;
// get chart bar width
var containerWidth=numberOfBars*barWidth;
chart.setSize($(container).width(),$(container).height());
};
In setChartContainerWidth() i used highchart setSize() method to resize chart..
Thanks if someone can help me to remove spaces in between bars of one group.
Thanks
I used the spacingTop attribute to enforce a maximum pointWidth:
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
You will have to adjust the calculation of the spacingTop depending on your data structure and the size of your axis titles.