Area Chart- Removing vertical borders from chart

[Ansuman Panda]

Hello Synfusion Team,

We are using synfusion area chart. We want to hide the vertical lines of area chart. Is there any way to do it?

I tried using line chart but there i couldn't set the color gradient.

Our Result:

We want to hide vertical lines highlighted in yellow. It should look something like below.

html-

<ejs-chart style='display:block; height: inherit !important;' [chartArea]='chartConfig?.chartArea'

[primaryXAxis]='chartConfig?.primaryXAxis' [primaryYAxis]='chartConfig?.primaryYAxis'

[chartArea]='chartConfig?.chartArea' [height]="chartConfig?.height" [tooltip]="chartConfig?.tooltip">

<e-series-collection>

<e-series #ejsChart [dataSource]='chartData' [type]='chartConfig?.chartType' [name]='chartConfig?.name'

[xName]='chartConfig?.xName'

[yName]='chartConfig?.yName' [fill]='fill' width=2

[border]='chartConfig?.border' opacity=1>

e-series>

e-series-collection>

ejs-chart>

ts:

this.chartConfig= {

chartType: 'Area',

primaryXAxis: this.primaryXAxis,

primaryYAxis: this.primaryYAxis,

xName: 'week',

yName: 'value',

legendSettings: {

visible: false

},

chartArea: this.chartArea,

fill: '#328DFF',

border: {

color: '#0033A0',

width: 2

},

tooltip: {

enable: false

},

height: '30%'

};

[Durga Gopalakrishnan]

Hi Ansuman, 

Greetings from Syncfusion. 

By default, when border is specified for area chart, border will be applied for whole path. We suggest you to use Line series along with an area series to achieve your requirement. Please check with below snippet and sample. 

<ejs-chart> 

            <e-series-collection> 

                <e-series [dataSource]='data' type='Line' xName='x' yName='y'  fill="blue" width=2 > 

                </e-series> 

            </e-series-collection> 

</ejs-chart> 

 

Sample : https://stackblitz.com/edit/angular-bumivs 

Kindly revert us if you have any concerns. 

Regards,  

Durga G

[Ansuman Panda]

Okay, I think this will do. Thank you synfusion team.

[Durga Gopalakrishnan]

Hi Ansuman, 

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

Regards,  

Durga G