apexcharts/ng-apexcharts

remove values from datalabel

Closed this issue · 0 comments

Is there any way to remove datalabel values in ng-apexcharts and permanently show the labels without description

for example keep my chart like this

Captura de Tela 2022-03-28 às 11 29 54

Currently the only way that comes in the documentation was like this

Captura de Tela 2022-03-28 às 11 30 19

  • @angular/cli - 12.2.12
  • ng-apexcharts - 1.7.0
  • apexcharts - 3.33.2

Config Chart:

  chartOptions: ChartOptions = {
        series: [
            {
                name: 'transactions',
                type: 'column',
                data: [
                    {
                        y: 10,
                        x: 1,
                    },
                    {
                        y: 20,
                        x: 2,
                    },
                    {
                        y: 30,
                        x: 3,
                    },
                    {
                        y: 40,
                        x: 4,
                    },
                    {
                        y: 50,
                        x: 5,
                    },
                    {
                        y: 50,
                        x: 6,
                    },
                    {
                        y: 50,
                        x: 7,
                    },
                ],
            },
            {
                name: 'type',
                type: 'line',
                data: [
                    {
                        y: 10,
                        x: 1,
                    },
                    {
                        y: 20,
                        x: 2,
                    },
                    {
                        y: 30,
                        x: 3,
                    },
                    {
                        y: 40,
                        x: 4,
                    },
                    {
                        y: 50,
                        x: 5,
                    },
                    {
                        y: 50,
                        x: 6,
                    },
                    {
                        y: 50,
                        x: 7,
                    },
                ],
            },
        ],
        chart: {
            height: 200,
            type: 'line',
            toolbar: {
                show: false,
            },
        },
        plotOptions: {
            bar: {
                columnWidth: '50%',
            },
        },
        grid: {
            padding: {
                top: 0,
                left: 0
            },
        },
        stroke: { width: [4, 4, 4] },
        dataLabels: {
            enabled: true,
            enabledOnSeries: [1],
            style: {
                colors: ['#004177'],
            },
            background: {
                enabled: true,
                borderWidth: 0,
                borderColor: '#004177',
                borderRadius: 50,
            },
            formatter: function (val: number) {
                console.log(val);
                return val;
            },
        },
        xaxis: {
            type: 'numeric',
            min: 0,
            max: 7,
            tickAmount: 7,
            labels: {
                formatter: function (val: string) {
                    if (typeof val !== 'undefined') {
                        return `D+${val}`;
                    }
                    return val;
                },
            },
        },
        yaxis: {
            labels: {
                show: true,
                formatter: function (val: number) {
                    return val + 'L';
                },
                padding: 0,
                offsetY: 10,
                offsetX: 10
            },
            
        },
        tooltip: {
            shared: true,
            intersect: false,
            y: {
                formatter: function (y: number) {
                    if (typeof y !== 'undefined') {
                        return y.toFixed(0) + ' points';
                    }
                    return y;
                },
            },
        },
        colors: ['#ffca05', '#004177'],
        legend: {
            show: false,
        },
    };

HTML:

   <div id="chart">
      <apx-chart
        [series]="chartOptions.series"
        [chart]="chartOptions.chart"
        [yaxis]="chartOptions.yaxis"
        [xaxis]="chartOptions.xaxis"
        [stroke]="chartOptions.stroke"
        [dataLabels]="chartOptions.dataLabels"
        [legend]="chartOptions.legend"
        [colors]="chartOptions.colors"
        [plotOptions]="chartOptions.plotOptions"
        [tooltip]="chartOptions.tooltip"
      ></apx-chart>
    </div>