tooltip many series

[Frédéric]

I try to show a tooltip for three series. Two of them are a line and the third is a column

<e-stockchart-series [dataSource]='data1' type='Line' xName='x' yName='close' name="{{'popupResult.Average' | translate }}" fill="rgb(0, 136, 239)">

</e-stockchart-series>

<e-stockchart-series [dataSource]='data2' type='Line' xName='x' yName='close' name="{{'popupResult.Median' | translate }}" fill="rgb(0, 70, 95)">

</e-stockchart-series>

<e-stockchart-series [dataSource]='data1' type='Column' xName='x' yName='volume' yAxisName='yAxis1' fill="rgba(40, 170, 226, 0.45)">

</e-stockchart-series>

with that tooltip, my column do not appear in the tooltip :

this.tooltip = {  enable: true, format: '${series.name} ${point.x} : ${point.y}$ }

with that tooltip, my thirs colum appear two times, after each point :

this.tooltip = { enable: true, format: '${series.name} ${point.x} : ${point.y}$<br/>' + ' ${point.volume}',   }

I want my third series ( column ) to appear like the two other series who are a line. 

how can i do that ?

[Srihari Muthukaruppan]

Hi Frédéric, 

 

Based on the provided code snippet. We suggest you to use tooltipMappingName property in the series and use point.tooltip in the format to access the additional value from the data source. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-mcnwbp-4m7kzo 

 

Code Snippet: 

// add your additional code here 

<ejs-chart 

      style="display:block" 

      align="center" 

      id="chartcontainer" 

      [title]="title" 

      [primaryXAxis]="primaryXAxis" 

      [primaryYAxis]="primaryYAxis" 

      [tooltip]="tooltip" 

      (load)="load($event)" 

      [chartArea]="chartArea" 

      [width]="width" 

    > 

      <e-series-collection> 

        <e-series 

          [tooltipMappingName]="tooltipMappingName" 

          [dataSource]="data" 

          type="Line" 

          xName="x" 

          yName="y" 

          name="Germany" 

          width="2" 

          [marker]="marker" 

        > 

        </e-series> 

        <e-series 

          [tooltipMappingName]="tooltipMappingName" 

          [dataSource]="data1" 

          type="Line" 

          xName="x" 

          yName="y" 

          name="England" 

          width="2" 

          [marker]="marker" 

        > 

        </e-series> 

        <e-series 

          [tooltipMappingName]="tooltipMappingName" 

          [dataSource]="data2" 

          type="Column" 

          xName="x" 

          yName="y" 

          name="England" 

          width="2" 

          [marker]="marker" 

        > 

        </e-series> 

      </e-series-collection> 

    </ejs-chart> 

// add your additional code here 

 

public data: Object[] = [ 

    { x: new Date(2005, 0, 1), y: 21, volume: 20 }, 

    { x: new Date(2006, 0, 1), y: 24, volume: 20 }, 

    { x: new Date(2007, 0, 1), y: 36, volume: 20 }, 

    { x: new Date(2008, 0, 1), y: 38, volume: 20 }, 

    { x: new Date(2009, 0, 1), y: 54, volume: 20 }, 

    { x: new Date(2010, 0, 1), y: 57, volume: 20 }, 

    { x: new Date(2011, 0, 1), y: 70, volume: 20 } 

  ]; 

  public data1: Object[] = [ 

    { x: new Date(2005, 0, 1), y: 28, volume: 20 }, 

    { x: new Date(2006, 0, 1), y: 44, volume: 20 }, 

    { x: new Date(2007, 0, 1), y: 48, volume: 20 }, 

    { x: new Date(2008, 0, 1), y: 50, volume: 20 }, 

    { x: new Date(2009, 0, 1), y: 66, volume: 20 }, 

    { x: new Date(2010, 0, 1), y: 78, volume: 20 }, 

    { x: new Date(2011, 0, 1), y: 84, volume: 20 } 

  ]; 

  public data2: Object[] = [ 

    { x: new Date(2005, 0, 1), y: 18, volume: 20 }, 

    { x: new Date(2006, 0, 1), y: 14, volume: 20 }, 

    { x: new Date(2007, 0, 1), y: 18, volume: 20 }, 

    { x: new Date(2008, 0, 1), y: 10, volume: 20 }, 

    { x: new Date(2009, 0, 1), y: 16, volume: 20 }, 

    { x: new Date(2010, 0, 1), y: 18, volume: 20 }, 

    { x: new Date(2011, 0, 1), y: 14, volume: 20 } 

  ]; 

 public tooltipMappingName: string = "volume"; 

// add your additional code here 

 

Screenshot: 

 

 

If please let me know, if you have any queries.  

Regards, 

Srihari M 

[Frédéric]

Thanks for the reply, but that do not solve my problem.   

On my tooltip, i always see the two series line, and after the two series line, I want to show the column series. I join a screen of what I have right now.

I want to have "Quantité: 24" at the end ( on a third line ) and not after each series

i also add the full code of my ejs-stochcart in case the problem could be here

 <ejs-stockchart id='stockChartMultiSeries' [chartArea]='chartArea' [primaryXAxis]='primaryXAxis' [crosshair]='crosshair' [primaryYAxis]='primaryYAxis'

                    [exportType]='exportType' [enablePeriodSelector]="enableSelector" [tooltip]='tooltip' (loaded)="loaded($event)">

      <e-stockchart-axes>

        <e-stockchart-axis rowIndex=1 name='yAxis1' opposedPosition='true' title='quantité' [majorGridLines]='majorGridLines' labelFormat='{value}'

                           [minimum]='volumeMin' [maximum]='volumeMax' [interval]='volumeInterval' [lineStyle]='lineStyle'>

        </e-stockchart-axis>

      </e-stockchart-axes>

      <e-stockchart-series-collection>

          <e-stockchart-series [dataSource]='data1' type='Line' xName='x' yName='close' name="{{'popupResult.Average' | translate }}" fill="rgb(0, 136, 239)"></e-stockchart-series>

          <e-stockchart-series [dataSource]='data2' type='Line' xName='x' yName='close' name="{{'popupResult.Median' | translate }}" fill="rgb(0, 70, 95)"></e-stockchart-series>

        <e-stockchart-series [dataSource]='data1' type='Column' xName='x' yName='volume' yAxisName='yAxis1' fill="rgba(40, 170, 226, 0.45)">

        </e-stockchart-series>

      </e-stockchart-series-collection>

    </ejs-stockchart>

Attachment: tooltip_5035892d.zip

[Srihari Muthukaruppan]

Hi Frédéric, 

We can achieve your requirement using shared property in the tooltip. Based on that we have prepared a sample for your reference please find the sample, code snippet and screenshot below. 

Sample: https://stackblitz.com/edit/angular-mcnwbp-kiynsa?file=app.component.ts 

 

Code Snippet: 

// add your additional code here 

public tooltip: Object = { 

    enable: true, 

    shared: true, 

    format: '${series.name} ${point.x} : ${point.y}$' 

  }; 

// add your additional code here 

 

Screenshot: 

 

 

Note: We can also customize the tooltip text using tooltipRender event in the chart. 

Let us know if you have any concerns. 

Regards, 

Srihari M 

[Frédéric]

I see it working in your example.. But that's not working for me.  With the option shared:true,  the only two first series type='line' appear in the tooltip.  the series type='Column' still do not appear.

You have a very simple example, but me I am using :

  <e-stockchart-axes>

        <e-stockchart-axis rowIndex=1 name='yAxis1' opposedPosition='true' title='quantité' [majorGridLines]='majorGridLines' labelFormat='{value}'

                           [minimum]='volumeMin' [maximum]='volumeMax' [interval]='volumeInterval' [lineStyle]='lineStyle'>

        </e-stockchart-axis>

      </e-stockchart-axes>

        <e-stockchart-series [dataSource]='data1' type='Column' xName='x' yName='volume' yAxisName='yAxis1' fill="rgba(40, 170, 226, 0.45)">

You do not use that in your stackblitz. I think you should try the exact same thing that I use?

[Srihari Muthukaruppan]

Hi Frédéric, 

 

We deeply regret for the inconvenience caused. 

 

We are able to reproduce the reported scenario. Based on your request we have logged a bug task on this. You can keep track of it from the below feedback portal link.  

  

Feedback Link: https://www.syncfusion.com/feedback/25131/tooltip-is-not-displayed-for-the-secondary-axis-in-stock-chart 

 

This fix will be available in our weekly patch release which is scheduled to be rolled out on or before 18 May 2021. We appreciate your patience until then. 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Frédéric, 

 

Sorry for the inconvenience caused. 

 

Due to some technical difficulties we are unable to include the fix in our patch release. We will include the fix in our upcoming weekly patch release which is scheduled to be rolled out on or before May 25 2021. We appreciate your patience until then. 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Frédéric,  

 

We have fixed the reported scenario. Since the fix is in the testing stage, we will include this fix in our weekly patch release which is scheduled to be rolled out on or before 1 June 2021. We appreciate your patience until then. As of now, we suggest you to use the below custom package with the latest version to overcome the reported scenario. Please find below custom package. 

 

Custom Package: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-charts685595108.zip 

 

Kindly replace this above chart package in your sample and let us know if still, you have faced any problems. 

 

Regards,  

Srihari 

[Srihari Muthukaruppan]

Hi Frédéric, 

 

Sorry for the inconvenience. 

 

Due to issue in package publishing we are unable to move the fix in this patch release. Hence we will include the fix in our upcoming weekly patch release which is scheduled to be rolled out on or before June 8 2021. Until then we suggest you to use the provided custom package to overcome the reported scenario. 

 

Regards, 

Srihari M 

[Srihari Muthukaruppan]

Hi Frédéric, 

 

We are glad to announce that our v19.1.67 patch release is rolled out, we have added the fix for the reported scenario. And you can use the latest (19.1.67) chart package version to get rid of the reported issue. 

   

Sample: https://stackblitz.com/edit/angular-ahal33-pw9ntr?file=app.component.html  

  

Screenshot:  

 

  

Let us know if you have any concerns.  

  

Regards,   

Srihari M  

[Frédéric]

Thank you very much for your reply.. but.. i don't see any changes in the results.  That still does not work for me.

And the link you just provide seems to be wrong.  That's not the good example chart.  It's very different than the screenshot you just provide

[Srihari Muthukaruppan]

Hi Frédéric, 

 

We deeply regret for the inconvenience caused. We have modified the sample with latest version for your reference please find the sample and screenshot below. 

 

Sample: https://stackblitz.com/edit/angular-u8um3v-vskdyo?file=app.component.html 

 

Screenshot: 

 

 

If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner. 

 

1. Try to reproduce the reported scenario in the provided sample.
2. Share more details if you have done any other customization in your project.

 

Regards, 

Srihari M 

[Frédéric]

Perfect ! It's all good. Thanks !!

[Srihari Muthukaruppan]

Hi Frédéric, 

 

Most welcome. 

 

Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari