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
310 stars 78 forks source link

remove values from datalabel #203

Closed ghost closed 2 years ago

ghost commented 2 years ago

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

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>