CODEWITHSUNDEEP
amcharts
discodowney
discodowney

Reputation: 1507

AM Charts - Changing the colour of tooltip text

Can't figure out how I change the text colour of tooltips. For my column chart I tried:

 series.tooltip.label.fill = am4core.color("#FFFFFF");

But it doesnt work. Curious also how I do it for the pie charts? Is there one place that I can update to affect all chart types, or do each need to be handled independently?

Upvotes: 3

Views: 11231

Answers (3)

Vibhuti narayan singh
Vibhuti narayan singh

Reputation: 5

I have added above line of code if you are using axis range you can use that however as I can see your problem please take a look below line of code will solve your problem

series.tooltip.getFillFromObject = false;
series.tooltip.label.propertyFields.fill = "color";
series.tooltip.background.propertyFields.stroke = "color";

https://www.amcharts.com/docs/v4/concepts/tooltips/

Upvotes: 0

Parshuram Reddy
Parshuram Reddy

Reputation: 29

After a lengthy search, I got the Below Line of code as successful line

pieSeries.labels.template.fill = am4core.color("white");

Upvotes: 0

Darlesson
Darlesson

Reputation: 6162

The tooltip label gets a calculated color that contrasts with the tooltip background. You need to set autoTextColor to false in order to the fill color to take effect.

series.tooltip.autoTextColor = false;
series.tooltip.label.fill = am4core.color("#FFFFFF");

The same is valid for pie charts.

You can create your own theme but that could be more than what you need.

You can use more than one theme, which allows you to use one default theme and then override just what you need:

am4core.useTheme(am4themes_animated);

am4core.useTheme(function customTheme (object) {
    // Identify the instances
    if (object instanceof am4core.Tooltip && object.label) {
        object.autoTextColor = false;
        object.label.fill = am4core.color("#FFFFFF");
    }
});

Upvotes: 9

Related Questions