Closed ghost closed 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
Currently the only way that comes in the documentation was like this
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>
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
Currently the only way that comes in the documentation was like this
Config Chart:
HTML: