apexcharts / ng-apexcharts

ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
MIT License
320 stars 79 forks source link

Multiline data labels - not line splitting, showing array as string twice #214

Closed CaryTannner closed 2 years ago

CaryTannner commented 2 years ago

Thanks for the great library, been able to make some nice charts but I've got an issue with multiline dataLabels.

Using ng-apexcharts and something similar to the code below to make data labels multiline.

dataLabels: {
        textAnchor: 'start',
        style: {
          fontSize: '20px',
          fontWeight: '600',
        },
        dropShadow: {
          enabled: false,
        },
        formatter: (value, { seriesIndex, w }) => {
          // TODO: split over two lines https://github.com/apexcharts/apexcharts.js/issues/670

          return [`${w.config.labels[seriesIndex]}`, `${value}%`] as unknown as string;

        },
      },

In my case, they are for pie charts

image

The problem I am having even shows up in some of your documentation examples (different function but I imagine they are conencted):
https://apexcharts.com/angular-chart-demos/column-charts/distributed-columns/

image

Any ideas/work arounds would be much appreciated, thanks

junedchhipa commented 2 years ago

Please update apexcharts to v3.35.3 which fixes this issue.