Search code examples
laravelvue.jschartsamchartsamcharts4

Amcharts custom variable color

I want a dynamic color on my chart. I use a imported css file with some identity colors. Like this: 

:root
{
    --brand-color: {{$color}};
}

I am using the AmChart World chart as visualisation but the a4mchart.color() does not like variables. How do I make sure that it does take in variables? here my code: 

let style = getComputedStyle(document.body);
let brandColor = style.getPropertyValue('--brand-color');
const chartWorld = am4core.create(this.$refs.chartdiv, am4maps.MapChart);

polygonSeries.fill = am4core.color(brandColor);

And this is what it returns:

Color {_value: {
alpha: 1
alternative: Color
darkColor: Color
hex: "#000000"
lightColor: Color
rgb: Object
rgba: "rgb(0,0,0)"
_value: {r: 0, g: 0, b: 0, a: 1}
__proto__: Object…}}

It didn't change anything but the BrandColor does return the right string when I log it: "#A4A2A3"

Please help

Solution

  • From my testing, getPropertyValue returns everything after the property name, including any whitespace, which causes the color to not get parsed correctly by AmCharts; your log is likely returning " #A4A2A3". You'll want to call trim on the string beforehand:

    polygonSeries.mapPolygons.template.fill = am4core.color(brandColor.trim());

    Note that you need to set the fill on the series' mapPolygon template for it to apply to your map regions.