remove values from datalabel
Closed this issue · 0 comments
Deleted user commented
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
- @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>