Search code examples
javascriptangularapexcharts

Remove white line from apex donut chart Angular

I want to hide this white line from the apex chart I have made with the below configuration. I have tried a lot of to play with properties to remove that but it remains as it is. How can I remove those white lines between two different data.

In screenshot it is marked with red arrow. Those white line I wanted to remove.

white line

HTML

<apx-chart class=""
[chart]="newVsReturningOptions.chart"
[colors]="newVsReturningOptions.colors"
[labels]="newVsReturningOptions.labels"
[plotOptions]="newVsReturningOptions.plotOptions"
[series]="newVsReturningOptions.series"
[states]="newVsReturningOptions.states"
[tooltip]="newVsReturningOptions.tooltip"></apx-chart>

My config

this.newVsReturningOptions = {
    chart      : {
        animations: {
            speed           : 0,
            animateGradually: {
                enabled: false
            }
        },
        fontFamily: 'inherit',
        foreColor : 'inherit',
        height    : '56px',
        width     : '70px',
        type      : 'donut',
        sparkline : {
            enabled: true
        }
    },

    colors     : ['#0694A2', '#E2E2E2'],
    labels     : this.data.labels,
    plotOptions: {
        pie: {
            expandOnClick: false,
            donut        : {
                size: '80%'
            }
        }
    },
    series     : this.data.series,
    states     : {
        hover : {
            filter: {
                type: 'none'
            }
        },
        active: {
            filter: {
                type: 'none'
            }
        }
    },
    grid: {
      padding: {
       left: 0,
       right: 0
      }
    },
    stroke: {
      width: 0,
      
    },
    tooltip    : {
        enabled        : true,
        fillSeriesColor: false,
        theme          : 'dark',
        custom         : ({seriesIndex, w}) => {
            return `<div class="flex items-center h-8 min-h-8 max-h-8 px-3">
                        <div class="w-3 h-3 rounded-full" style="background-color: ${w.config.colors[seriesIndex]};"></div>
                        <div class="ml-2 text-md leading-none">${w.config.labels[seriesIndex]}:</div>
                        <div class="ml-2 text-md font-bold leading-none">${w.config.series[seriesIndex]}%</div>
                    </div>`;
        }
    }
};


}
Solution

  • I think you are forgetting to pass. the [stroke] input in your <apx-start></apx-start> component.

    Try passing it and it should do the trick for you.

    <apx-chart [chart]="newVsReturningOptions.chart"
           [colors]="newVsReturningOptions.colors"
           [labels]="newVsReturningOptions.labels"
           [plotOptions]="newVsReturningOptions.plotOptions"
           [series]="newVsReturningOptions.series"
           [states]="newVsReturningOptions.states"
           [tooltip]="newVsReturningOptions.tooltip"
           [stroke]="newVsReturningOptions.stroke">
</apx-chart>