RangeArea and vertical closing lines

[Oscar]

I need to remove this vertical lines:

The blue serie is a RangeArea type:

These is the border, stroke and fill:

How can I remove the vertical lines that close the area? It's possible?

I'm using RangeArea type because the two lines must show the max and min value. I tried to use two series, but after that i have a problem with the tooltip, because i need show the tooltip as a single serie (MAX-MIN ...)

Maybe, I can do this with other series type or other aproach ... i'm opened to any suggestion ;)

Thanks a lot! 

[Srihari Muthukaruppan]

Hi Oscar, 

 

Thanks for contacting syncfusion support. 

We have analysed your query. From that, we suggest you to use line series and set enable shared property tooltip to overcome the reported scenario as shown in the below code snippet. You can also customize the tooltip based on the series index using tooltipRender event. We have also prepared a sample for your reference. Please find the sample and screenshot below.   

    

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/LineSeries-809762145.zip 

  

Code Snippet:   

App.vue:   

// add your additional code snippet here   

<ejs-chart style='display:block' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'  :tooltip='tooltip' :tooltipRender='tooltipRender' > 

            <e-series-collection> 

                <e-series :dataSource='seriesData' type='Line' xName='x' yName='high' :border='border' name='High' width=2 > </e-series> 

                <e-series :dataSource='seriesData' type='Line' xName='x' yName='low' :border='border' name='Low' width=2  > </e-series> 

            </e-series-collection> 

        </ejs-chart> 

// add your additional code snippet here   

 

tooltip: { enable: true, shared: true}, 

tooltipRender: function (args){ 

         if (args.series.index  === 1) { 

             debugger; 

         } 

}, 

   

Screenshot:   

    

  

Let us know if you have any concerns.  

  

Regards,  

Srihari M