Double Bar with Double Tooltip

[Deepak Jain]

Hello Team, 

Do we have below mention chart feature :

[Srihari Muthukaruppan]

Hi Deepak, 

We can achieve your requirement by using “enableSideBySidePlacement” property and “columnWidth” property in the chart. Based on that we have prepared a sample and also attached our demo sample link for your reference. Please find the sample, code snippet and screenshot.  

    

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

 

Demo link: https://ej2.syncfusion.com/angular/demos/#/material/chart/column-placement 

 

Code Snippet: 

// add your additional code here 

<ejs-chart style="display:block;" [enableSideBySidePlacement]="placement" > 

      <e-series-collection> 

        <e-series [dataSource]="data" type="Column" xName="x" yName="y" name="Mango" columnWidth="0.7" 

          fill="#60b6dc" > 

        </e-series> 

                <e-series [dataSource]="data" type="Column" xName="x" yName="y" name="Mango" columnWidth="0.4" 

          fill="#60b6dc" > 

        </e-series> 

      </e-series-collection> 

    </ejs-chart> 

// add your additional code here 

  

Screenshot:   

 

 

Let us know if you have any concerns. 

 

Regards,
Srihari M

[Deepak Jain]

Hi Shrihari,

Thaks for your reply, You solved 50% of my requirement. I want the same exact like this. separate tooltip, y and x-axis movable labels with bubble.

[Srihari Muthukaruppan]

Hi Deepak,  

 

We have analysed your query. From that, we would like to let you know that it is not possible to achieve your requirement of separate tooltip in chart. Hence we suggest you to enable marker to highlight the selected column as shown in the screenshot. And regarding movable labels we can achieve your requirement by using “crosshairTooltip” property in the axis of the chart. Based on that we have prepared a sample for your reference. Please find the sample, code snippet and screenshot.   

     

 Sample: https://stackblitz.com/edit/angular-b4snie-jenhtf-9ytjgz?file=app.component.ts 

  

Code Snippet:  

// add your additional code here  

<ejs-chart style="display:block;" [enableSideBySidePlacement]="placement" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" >  

      <e-series-collection>  

        <e-series [dataSource]="data" type="Column" xName="x" yName="y" name="Mango" columnWidth="0.7"  

          fill="#60b6dc" >  

        </e-series>  

                <e-series [dataSource]="data" type="Column" xName="x" yName="y" name="Mango" columnWidth="0.4"  

          fill="#60b6dc" >  

        </e-series>  

      </e-series-collection>  

    </ejs-chart>  

// add your additional code here  

 

public primaryXAxis: Object = { 

    valueType: "Category", 

    interval: 1, 

    crosshairTooltip: { 

      enable: true 

    }, 

    majorGridLines: { width: 0 } 

  }; 

 

   

Screenshot:    

   

  

Let us know if you have any concerns.  

  

Regards,
Srihari M 

[Deepak Jain]

Thanks for your reply, good to know that you have movable labels but still my management wants double tooltip for their requirement and want to switch to other options. 

I will glad if i can achieve this in sf charts.

Thanks 

[Srihari Muthukaruppan]

Hi Deepak, 

 

Sorry for the inconvenience. 

 

We have analysed your query. From that, we would like to let you know that as of now we do not have support to add seperate tooltip, we have considered this scenario as a feature request and you can keep track of it from the below feedback portal link.    

  

Feedback Link: https://www.syncfusion.com/feedback/19575/seperate-tooltip-for-back-to-back-column 

  

This feature will be included in any of our upcoming release and if you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

  

Please let us know, if you need any further assistance on this. 

  

Regards, 

Srihari M