javascriptjqueryamchartsamcharts5

How to change primaryButton color in amcharts5?


I'm trying to change the color of zoomOut button or so called "primaryButton" in amcharts5. However digging through documentation i couldn't find anything that works.

var root = am5.Root.new(divId);
root._logo.dispose();

var fpTheme = am5.Theme.new(root);

fpTheme.rule("Label").setAll({
    fontSize: "1rem",
    fill: am5.color(0x97a0b4)
    // fill: am5.color(0x777777)
    // minGridDistance: 30
});

fpTheme.rule("LineSeries").adapters.add("stroke", function(stroke, target) {
    // console.log(stroke);
    // return am5.color(0x4CAF50);
    return am5.color(0x4ac445);
});

// this below doesn't work. The above code works just fine.

fpTheme.rule("Button").setAll({
    minus: {
        fill: am5.color(0x4ac445)
    }
});

fpTheme.rule("Graphics").setAll({
    minus: {
        fill: am5.color(0x4ac445)
    }
});

root.setThemes([
    am5themes_Animated.new(root),
    fpTheme
]);

Clicking on zoomOut button does show that green color "0x4ac445" but the button is still blue like this from docs https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/


Solution

  • I've checked this code and it works fine.

    // change zoom button color to red
    root.interfaceColors.set("primaryButton", am5.color(0xff0000));
    
    // change zoom button-hover color to black
    root.interfaceColors.set("primaryButtonHover", am5.color(0x000000));