We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Compare multiple series

Thread ID:

Created:

Updated:

Platform:

Replies:

148111 Oct 6,2019 03:57 PM UTC Oct 11,2019 10:01 AM UTC ASP.NET Core - EJ 2 7
loading
Tags: Stock Chart
Stefan
Asked On October 6, 2019 03:57 PM UTC

Hi

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


/Stefan


Srihari Muthukaruppan [Syncfusion]
Replied On October 7, 2019 05:30 AM UTC

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, 
  
 
 Screenshot:  
 
  
To know more information about the stock chart. Please refer our UG link shown below 
  
  
Let me know if you need further assistance. 
  
Regards, 
Srihari 


Stefan
Replied On October 7, 2019 06:51 AM UTC

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 [Syncfusion]
Replied On October 8, 2019 11:19 AM UTC

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.  
  
  
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
Replied On October 9, 2019 09:09 AM UTC

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 [Syncfusion]
Replied On October 10, 2019 02:46 PM UTC

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.   
   
   
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
Replied On October 10, 2019 07:09 PM UTC

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 [Syncfusion]
Replied On October 11, 2019 10:01 AM UTC

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 1st 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon