No adaptation in the pie chart when the number of legends increases

[TangoPJ]

Hello! :wave: To create the pie chart I'm using Vue 3, composition API. I dynamically add the data to chart.value.data using my custom function getReport(). And my code looks like this:

const chart = ref();
const label = ref();

const createChart = () => {
  chart.value = am4core.create(chartdiv.value, am4charts.PieChart);
  chart.value.paddingRight = 20;
  chart.value.innerRadius = am4core.percent(50);
  chart.value.legend = new am4charts.Legend();
  chart.value.legend.valueLabels.template.disabled = true;

  const pieSeries = chart.value.series.push(new am4charts.PieSeries());
  pieSeries.dataFields.value = 'hours';
  pieSeries.dataFields.category = 'project';
  pieSeries.slices.template.tooltipText = '{project}';
  pieSeries.legendSettings.valueText = '{project}';
  pieSeries.labels.template.disabled = true;
  pieSeries.ticks.template.disabled = true;

  label.value = pieSeries.createChild(am4core.Label);
  label.value.horizontalCenter = 'middle';
  label.value.verticalCenter = 'middle';
  label.value.fontSize = 20;
  label.value.text = `
    Total: {values.value.sum.formatDuration("hh'h' m'm'")}
  `;
};

onMounted(() => {
  createChart();
});

watch(worklogs, () => {
  chart.value.data = getReport();
});

:metal: It works:

:interrobang: But if I get more projects it increases the number of legends I get this bug:

How can I solve this problem? I need to save the size of chart constantly

I tried to divide the chart and legends in two different divs, but my browser crashes when I add this line of the code:

Thank you :pray:

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[TangoPJ]

@martynasma Thanks for the reply. Please can you open my simple example - https://codesandbox.io/s/serene-cookies-nid1ss?file=/src/components/HelloWorld.vue and once you see the chart - can you uncomment 80-th line and refresh the page? What am I doing wrong?

[martynasma]

Thanks. Indeed that looks weird. Must be something related to Vue, as I can't reproduce this outside of Vue.

We will take a stab at figuring it out.

[Pauan]

@TangoPJ You need to follow our Vue tutorial correctly:

• You should use mounted() instead of setup()
• You must cleanup the chart using beforeUnmount()
• You need to use this.$refs.chartdiv instead of creating a new shallowRef
• You cannot put amCharts objects inside of ref, you must either use shallowRef or a regular property (like this.chart)

Here is a working codesandbox: https://codesandbox.io/s/naughty-phoebe-1fdnp1?file=/src/components/HelloWorld.vue

[TangoPJ]

@Pauan Thank you, but I'm using composition API, I should use setup() in my code and there is not this keyword in the composition API, an alternative way to use this.$refs in the composition API we should create constant as a shallowRef

[TangoPJ]

P.s. @Pauan I solved my problem by separating labels and charts into different divs as described here - https://github.com/amcharts/amcharts4/issues/4189

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.