StockLegend customisation

[xdajay]

I've tried everything but unable to change to background for stock legend.
I 'm trying it to make to make transparent or apply any color, but i'm unable too. (v5.9.1)

`

let valueLegend = mainPanel.plotContainer.children.push(
  am5stock.StockLegend.new(rootRef.current, {
    stockChart: stockChart
  })
);

valueLegend.itemContainers.template.setAll({
  background: am5.Rectangle.new(rootRef.current, {
    fill: am5.color(0x000000),
    fillOpacity: 0,
    shadowOpacity: 0
  })
});

valueLegend.itemContainers.template.setAll({
  background: {
    fill: am5.color(0x000000),
    fillOpacity: 0
  },
  shadowOpacity: 0
});


if (!valueLegend.background) {
  valueLegend.set("background", am5.Rectangle.new(rootRef.current, {
    fill: am5.color(0xffffff),
    fillOpacity: 0
  }));
}


valueLegend.background.set("fill", am5.color(0x000000));
valueLegend.background.set("fillOpacity", 0);

`

[workingbuddy10]

To remove the background or apply anything you can create your custom theme!!

The easiest way to do this would be to create a custom theme and override things set in StockChartDefaultTheme, for example:

const myTheme = am5.Theme.new(root);

myTheme.rule("RoundedRectangle", ["legend", "itemcontainer", "background", "stocklegend"]).setAll({
   fillOpacity: 0
});

myTheme.rule("Container", ["legend", "itemcontainer", "stocklegend"]).setAll({
   paddingRight:0,
   paddingTop:0,
   paddingBottom:0,
   paddingLeft:0
});

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

The above code will remove the background.
@xdajay

[martynasma]

You can use custom theme as @workingbuddy10 suggested. Or you can also use a template setup function:

valueLegend.itemContainers.template.setup = function(target) {
  target.get("background").set("fillOpacity", 0);
}

[xdajay]

Thanks @martynasma and @workingbuddy10 for prompt response and solution, such a great community and team support, looks like I made correct decision to build on top of AmCharts.

I've understood most of the core functions, classes and setting, I just have few last question, please bare with me.

1. Any way to have DrawingTools in expanded way by default as in above image.

2. What are classes/functions to invoke/get drawing tools options ?

Thank you.

[workingbuddy10]

Though there is no in-built or straight way (like using a couple of functions) to do that in amcharts, but ya you can write custom code to have this feature.
Try reading the drawing tool code and how they work/initiated , you will get your answer there!

@xdajay

[martynasma]

@xdajay Let's keep this place clutter-free, both for our own sake and the other's. If you have other questions, not directly related to original topic, please post a separate issue.

For the vertical toolbar, there's already a feature request open for the same functionality: #1009

Make sure you follow it.

[xdajay]

@martynasma Sure & Thanks, will mark this question/issue solved, will try to tweek around for few days for invoke/get drawing tools options and open new issue, for now I know how to invoke a tool via drawingControl.setAll.

Thanks once again :)