Legend spacing not working when position is set to right

[afshinhaftlangi]

Hello,

I'm trying to change the spacing for the legend in the pie chart. The spacing doesn't work when the position on the legend is set to right/left. it works when the position is set to the bottom.

Is is a bug or I'm missing something?

Thanks

<template>
  <ag-charts-vue :options="options"> </ag-charts-vue>
  <ag-charts-vue :options="options1"> </ag-charts-vue>
</template>

<script>

import { AgChartsVue } from 'ag-charts-vue3';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'



export default {
  name: 'App',
  components: {
    AgChartsVue
  },
  setup(){
    return{
      options: {
        // Data: Data to be displayed in the chart
        data: [
          { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
          { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
          { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
          { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
          { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
          { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
        ],
        // Series: Defines which chart type and data to use
        series: [{ type: 'pie', angleKey: 'avgTemp', legendItemKey: 'avgTemp' }],
        legend:{
          position:'right',
          spacing:10
        }
      },
      options1: {
        // Data: Data to be displayed in the chart
        data: [
          { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
          { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
          { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
          { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
          { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
          { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
        ],
        // Series: Defines which chart type and data to use
        series: [{ type: 'pie', angleKey: 'avgTemp', legendItemKey: 'avgTemp' }],
        legend:{
          position:'bottom',
          spacing:10
        }
      }
    }
  }
}
</script>

[AG-DavidG]

Hi @afshinhaftlangi

We're keen to look into this but we need to be able to reproduce the issue you've described.

Please provide the following (as per our bug template in Github):

• A live example (plunker, stackblitz, etc) or link to a repo showing the issue
• A list of steps to follow to reproduce the issue
• Descriptions of current behavior and expected behavior

We're looking forward to your response to we can investigate this further.

Thank you!

[afshinhaftlangi]

Thank you for your response. Please see the repository below to reproduce the issue

https://github.com/afshinhaftlangi/ag-chart-spacing-issue.git

I am attempting to adjust the spacing for the legend in the pie chart. However, the spacing does not seem to work when the legend is positioned to the right or left. It only works when the legend is positioned at the bottom. I have created two charts with two different legend positions in the repository for you to review.

[AG-DavidG]

Hi @afshinhaftlangi

Thanks for this.

We have reproduced the issue and the behaviour is as expected.

The legend spacing is the minimum space between the chart and the legend.

In the case of the pie series, the legend is placed at the edge of the canvas and therefore further away from the chart than the spacing value provided. If you increase the spacing or use a narrower container, you will see that it works as expected.

Thanks

David

[afshinhaftlangi]

Thank you for the clarification