Highlight all the Categories when at least one category is selected.

I want to implement this Stacked chart
https://ej2.syncfusion.com/demos/chart/stacked-bar/

However, I wish to be able to highlight the "Apple" bar even If I hover on the first bar on "Apple"

What I mean is, when I hover on "Apple" Category, all the "Apple" category should be highlighted on all columns leaving all other categories as secondary like grayed out.

Also, the legend should be highlighted.

See eg. using a different library

Hover on any item and see the effect.

14 Replies 1 reply marked as answer

SM Srihari Muthukaruppan Syncfusion Team April 30, 2021 12:54 PM UTC

Hi Idrish, 
 
Based on your requirement we would like to let you know that we can achieve your requirement using highlightMode as Series in the chart. We have also attached the sample, code snippet and screenshot below for your reference. 
 
 
Code Snippet: 
// add your additional code here 
 
var chart = new ej.charts.Chart({ 
  primaryXAxis: { 
    title: "Countries", 
    valueType: "Category", 
    interval: 1, 
    labelIntersectAction: "Rotate90" 
  }, 
  primaryYAxis: { 
    title: "Distribution", 
    labelFormat: "{value}%", 
    interval: 20 
  }, 
  highlightMode: "Series", 
}); 
 
// add your additional code here 
 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


Marked as answer

IL Idrish Laxmidhar April 30, 2021 01:55 PM UTC

Thank you. That is exactly what I was looking for. Appreciate your quick reply.


SM Srihari Muthukaruppan Syncfusion Team May 3, 2021 07:50 AM UTC

Hi Idrish,    
    
Most welcome.  
   
Kindly get in touch with us, if you require further assistance. We are always happy in assisting you.     
     
Thanks,     
Srihari M  



IL Idrish Laxmidhar July 26, 2021 09:18 AM UTC

Hello Srihari,

Another question. I was trying to get the below 3D chart working using the latest syncfusion library.

https://js.syncfusion.com/demos/jquery/#!/azure/chart/3d/100%stackedcolumn


Does the latest library have these features of 3D view + rotation etc as seen in URL above?


Below is where I tried to use the settings.

https://stackblitz.com/edit/o2vzej-xpvnvd?file=index.js




DG Durga Gopalakrishnan Syncfusion Team July 27, 2021 01:44 PM UTC

Hi Idrish, 
 
As of now, we don’t have 3D support for chart in ej2. We have already logged a feature request on this. Based on other logged tasks priority, this feature will be included in any of our upcoming release. You can keep track of the feature from the feedback portal below.  
  
  
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.  

Kindly revert us if you have any concerns. 
 
Regards, 
Durga G


IL Idrish Laxmidhar replied to Srihari Muthukaruppan December 14, 2021 04:29 AM UTC

Hello, This is followup to my very first question related to the stacked column charts your reply of using the below settings i.e
highlightMode: "Series", 
worked well on chrome browser.

However, this does not work on IE11 browser, attaching here screenshot for your reference.


Please suggest.

 



DG Durga Gopalakrishnan Syncfusion Team December 15, 2021 03:14 PM UTC

Hi Idrish, 

Please mention in which package version you have faced the reported scenario, so that it will be helpful to validate further. 

Regards,  
Durga G


IL Idrish Laxmidhar December 15, 2021 03:17 PM UTC

Hello Durga,

I have attached the .js file that I am using.


Attachment: ej2.min.js_c979c47.zip


IL Idrish Laxmidhar December 16, 2021 05:13 AM UTC

Another question related to the file size:

If you check the file I attached for my previous comment, the .js file I am using is 15MB. Is there a way I can only get the relevant .js code files for the stackedcolumn chart API ?



DG Durga Gopalakrishnan Syncfusion Team December 16, 2021 03:19 PM UTC

Hi Idrish, 

As of now, we don’t have support to generate file for particular chart type alone. You can download the chart control source in CRG which includes all chart source. 


We are validating the reported issue with specified scenario. We will update the status within two business days(20th December, 2021). We appreciate your patience until then. 

Regards, 
Durga G 



DG Durga Gopalakrishnan Syncfusion Team December 21, 2021 03:18 PM UTC

Hi Idrish, 

Thanks for being patience. We have validated your reported scenario. We have considered this as a bug and logged a defect report for this issue. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 4th January 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 


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. 

Regards, 
Durga G 




DG Durga Gopalakrishnan Syncfusion Team January 11, 2022 03:11 PM UTC

Hi Idrish,


We are glad to announce that our v19.4.42 patch release is rolled out; we have added the fix for reported issue and is available for download under the following link.


Npm Packages : https://www.npmjs.com/~syncfusionorg


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

Durga G



IL Idrish Laxmidhar January 27, 2022 06:28 AM UTC

Hello Durga,

Thank you for the updates.

Can you please point me to the .js version of the ej2-charts instead of the npm package ? I am directly using the .js file as my integration is in vanilla Javascript.


Thank you




DG Durga Gopalakrishnan Syncfusion Team January 28, 2022 03:17 PM UTC

Hi Idrish, 

We suggest you to refer the CDN link if you are using the JavaScript. We have prepared sample based on that. Please check with below snippet. 

index.html 
<script src="https://cdn.syncfusion.com/ej2/19.4.47/dist/ej2.min.js" type="text/javascript"></script> 


Kindly revert us if you have any concerns. 

Regards, 
Durga G 


Loader.
Up arrow icon