Search code examples
javascriptamcharts4

Pattern background color amCharts

I am developing a small JS app, which uses the amCharts library. I am using the latest version of amCharts 4, mainly the map part of the library.

The problem I have, is that I can't change the background color, when I use a LinePattern overlay over a certain country.

How it looks: img

And this is how I want it to be. Basically set the background to a color of one country and the LinePattern to a color of second country.

How I want it to look: img

I have tried changing the fill color on the MapPolygonSeries, the fill value, which adapter returns, but both without a success.

Here is the code, that I am creating this pattern.

"series": [{
        "type": "MapPolygonSeries",
        "useGeodata": true,
        "exclude": ["AQ"],

        "mapPolygons": {
            "propertyFields": {
                "fill": "fill",
                "selected": "selected"
            },
            //The adapter, takes care of the pattern
            "adapter": {
                "fill": function (fill, target) {
                    if (target.dataItem.dataContext && target.dataItem.dataContext.selected) {
                        var pattern = new am4core.LinePattern();
                        pattern.width = 5;
                        pattern.height = 5;
                        pattern.stroke = am4core.color("#6f3094");
                        pattern.strokeWidth = 1;
                        pattern.rotation = 45;
                        return pattern;
                    }
                    return fill;
                }
            }
        },

        "data": [{
            "id": "PL",
            "fill": "#6f3094"
        }, {
            "id": "DE",
            "fill": "#eb4034",
            "selected": true,
        }, {
            "id": "SE",
            "fill": "#228B22"    
        }]
    }]
Solution

  • following the solution 

        var pattern = new am4core.LinePattern();
    pattern.width = 5;
    pattern.height = 5;
    pattern.stroke = am4core.color("#6f3094");
    pattern.strokeWidth = 1;
    pattern.rotation = 45;
    //Code added - start
    pattern.backgroundFill = am4core.color("green");
    pattern.backgroundOpacity = 1;
    //Code added - end
    return pattern;