Legend Box

[workingbuddy10]

I want to customization in the legend.

1) I don't want that legend box/container.

2) I want to remove the space, marked with red in the image. As I am displaying multiple charts so space is an important factor.

Image:

Code for legend:

      var valueLegend = mainPanel.plotContainer.children.push(
          am5stock.StockLegend.new(root, {
            stockChart: stockChart,
            layout: am5.GridLayout.new(root, {
              maxColumns: 1,
              fixedWidthGrid: false,
            }),
          })
        ); 
    valueLegend.markers.template.setAll({
      width: 5,
      height: 5,
    });

    valueLegend.labels.template.setAll({
      fontSize: 10,
      fontWeight: "500",
    });

    valueLegend.valueLabels.template.setAll({
      fontSize: 10,
      fontWeight: "300",
    });

    setValueLegendData(valueLegend);

[zeroin]

I think 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
]);

https://codepen.io/team/amcharts/pen/GRwzpXd/f5a97bb37034fbae07a0bbbd48bd3905?editors=1010

[workingbuddy10]

Thanks that box removal part worked, but still there is a change left. Like removal of the space. Marked in the red circle. @zeroin

[zeroin]

The space is added because labels, icons have padding. You can either modify padding for all elements or simply set some negative paddingTop for your itemContainer.

[workingbuddy10]

Thanks it worked.