Compare multiple series

[Stefan]

Hi

Is it possible to  Compare multiple series like highcharts. See example in the following link:

Highchart multiple series

/Stefan

[Srihari Muthukaruppan]

Hi Stefan, 

  

Greetings from Syncfusion. 

  

We have validated your query. From that, we have prepared a sample based on the attached link. Please find below sample, 

  

 Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/multipleSeries939325935.zip  

 

 Screenshot:  

 

  

To know more information about the stock chart. Please refer our UG link shown below 

  

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/stock-chart/getting-started/ 

  

Let me know if you need further assistance. 

  

Regards, 

Srihari 

[Stefan]

Hi,

Thanks for a quick reply but this is not what the provided link is showing. I want to compare two or more stocks with the y-axis showing loss/gain in percent (%). Just plotting two stock data time series is often meaningless since one stock can have a value of $1000 and another stock a value of $1.

Regards,

/Stefan

[Srihari Muthukaruppan]

Hi Stefan, 

   

Sorry for the inconvenience. 

  

We have validated your query. From that, we would like to let you know that if you want to display multiple series content then set the “enable” property to true in tooltip settings. We can customize the tooltip text by using the “format” property. Also by using the “labelFormat” property of the axis, we can customize the label format of the axis. Based on that we have prepared a sample in EJ2-core and also provided the code snippet for your reference.  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multipleaxis-stockchart-687213265.zip   

  

Code Snippet:   

<div class="control-section" align="center"> 

    <ejs-stockchart id="stockchartmultiple" load="chartLoad" indicatorType="indicator" trendlineType="line" title="Compare Stock data values"> 

        <e-stockchart-primaryxaxis> 

           <e-crosshairtooltip enable="true"></e-crosshairtooltip> 

        </e-stockchart-primaryxaxis> 

       <e-stockchart-tooltipsettings enable="true" format="<b>${series.name} : ${point.y}</b>"> 

       </e-stockchart-tooltipsettings> 

        <e-stockchart-crosshairsettings enable="true" lineType="Vertical"></e-stockchart-crosshairsettings> 

        <e-stockchart-series-collection> 

            <e-stockchart-series type='Line' xName='x' yName='close' name='Apple'> 

            </e-stockchart-series> 

            <e-stockchart-series type='Line' xName='x' yName='close' name='Google'></e-stockchart-series> 

        </e-stockchart-series-collection> 

    </ejs-stockchart> 

<div> 

  

Screenshot: 

 

 

Let me know, if you have any concerns.  

  

Regards,  

Srihari  

[Stefan]

Hi again,

If you look at the chart in the link below you see that the y-axis is percentage. I want a stock chart that shows gains/losses in percentage over the chosen period on the y-axis. Even if it's only one stock in the chart I want to show the performance of the stock in percentage over the chosen period.  

Stockchart with performance

Regards,

/Stefan

[Srihari Muthukaruppan]

Hi Stefan,  

    

Sorry for the inconvenience.  

   

We have validated your query. From that, we would like to let you know that we can customize the percentage calculation for the y axis labels and tooltip using the “axisLabelRender” event and “tooltipRender” event respectively. Based on that we have prepared a sample and also provided the code snippet for your reference.   

   

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultipleSerieswithPercentage-1709543096.zip  

   

Code Snippet:    

<div class="control-section" align="center">  

    <ejs-stockchart id="stockchartmultiple" tooltipRender="tooltipRender" axisLabelRender="axisLabelRender"   title="Compare Stock data values"> 

        <e-stockchart-border width="0"></e-stockchart-border> 

        <e-stockchart-primaryxaxis > 

            <e-majorgridlines width="0"></e-majorgridlines> 

            <e-crosshairtooltip enable="true"></e-crosshairtooltip> 

        </e-stockchart-primaryxaxis> 

        <e-stockchart-primaryyaxis > 

            <e-linestyle color="transparent"></e-linestyle> 

            <e-majorticklines width="0" color="transparent"></e-majorticklines> 

        </e-stockchart-primaryyaxis> 

        <e-stockchart-tooltipsettings enable="true" ></e-stockchart-tooltipsettings> 

        <e-stockchart-crosshairsettings enable="true" lineType="Vertical"></e-stockchart-crosshairsettings> 

        <e-stockchart-series-collection> 

            <e-stockchart-series type='Line' xName='x' yName='close' name='Apple'> 

            </e-stockchart-series> 

        </e-stockchart-series-collection> 

    </ejs-stockchart>  

<div>  

<script> 

    function tooltipRender(args) { 

        var maximum = 0; 

        var percentage; 

        var average; 

        maximum = args.series.yAxis.visibleRange.max; 

        average = (args.series.yAxis.visibleRange.min + args.series.yAxis.visibleRange.max) / 2; 

        percentage = parseFloat(((args.point.close - average) / maximum * 100).toFixed(2)); 

        args.text = "yValue:" + percentage + '%'; 

    } 

    function axisLabelRender(args) { 

        if (args.axis.name === 'primaryYAxis') { 

            var maximum = 0; 

            var percentage; 

            var average; 

            maximum = args.axis.visibleRange.max; 

            average = (args.axis.visibleRange.min + args.axis.visibleRange.max) / 2; 

          percentage = Math.round(((args.value - average) / maximum)* 100); 

          args.text = percentage + '%'; 

        } 

    } 

</script> 

 

   

Screenshot:  

   

  

Let me know, if you have any concerns.   

   

Regards,   

Srihari   

 

[Stefan]

Hi again

Now we're close. I want the first value to the left to be 0%. All series should start at the same point to the left at 0%. See attached image.

To achieve that I need the first visible value in each series. Is this possible?

Regards, 

Stefan

[Srihari Muthukaruppan]

Hi Stefan,   

 

We have validated your query. From that, we would like to let you know that we can’t get the maximum and minimum range of axis before rendering the chart. So there is no possibility to change the 1^st data without finding the average of minimum and maximum. Kindly revert us, if you need further assistance. We are always happy in assisting you. 

                                                                                                                                                                                                                                             

Let me know, if you have any concerns. 

 

Regards, 

Srihari.