1. Home
  2. Forum
  3. Angular
  4. How Assign Theme to Data grid and Circular Gauge Chart

How Assign Theme to Data grid and Circular Gauge Chart

Hello Team , 

I want to assign some Built in theme to Data Grid Header and Circular Gauge Chart :

For Data Grid : I want to use themes like Material, Fabric , Tailwind , etc & To assign them to Data Grid Header.

Adding Some Snapshot for Refer 

2021-09-28 20_41_24-SiMetry.png


and also Same for Circular Gauge , it should applied to the cap color and needle tail color . 

SnapShot for Refer :

2021-09-28 20_38_08-SiMetry.png


So please provide some solution , to use different themes for this two charts . 

please reply ASA


5 Replies
IR Indumathi Ravi Syncfusion Team September 29, 2021 01:37 PM UTC

Hi Sourabh, 
  
Thank you for contacting Syncfusion Support. 
  
Please find the details for your queries from the below table. 
Queries 
Details 
For Data Grid : I want to use themes like Material, Fabric , Tailwind , etc & To assign them to Data Grid Header 
In your requirement, you want to apply different theme in the Grid based on the dropdown value. So, we have prepared sample with your requirement. In the dropdown change event, we have changed the themes with the help of link tag. 
  
Find the below sample and KB for more information. 
  
  
  
[index.html] 
  
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
     --- 
// refer the syncfusion theme with id 
    <link 
      rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" 
      rel="stylesheet" 
      type="text/css" 
      id="theme" 
    /> 
  </head> 
  <body class="ej2-new"> 
    ---- 
  </body> 
</html> 
  
[app.component.ts] 
  
  public themeChange(args: any): void { 
    // get the stylesheet element using its id and change its rel='nofollow' href link 
    document.getElementById('theme').rel='nofollow' href = 'https://cdn.syncfusion.com/ej2/' + args.value + '.css'; 
  } 
  
  
By using below documentation you can override the default CSS styles of specific element in the Grid. 
  
Same for Circular Gauge , it should applied to the cap color and needle tail color . 
In the Circular Gauge Component, we can set the theme for the cap and needle using the “theme” property. However, we can set the “theme” property in the "load" event. Please find the code snippet for applying the theme in the "load" event below. 
  
Code Snippet: 
[app.component.html] 
<ejs-circulargauge  (load)="load($event)"> 
  </ejs-circulargauge > 
 
[app.component.ts] 
  
public ThemeValue: GaugeTheme = 'Material'; 
  public load(args: ILoadedEventArgs): void { 
    args.gauge.theme = <GaugeTheme>this.ThemeValue; 
 } 
 
We have created a simple sample to demonstrate the same and it can be found from the below link. 
 
  
In the above sample link, we used a dropdown list to select different types of themes to apply to the Circular Gauge control. 
  
Please let us know if the above solutions meets your requirement and let us know if you need any further assistance. 
  
Regards, 
Indumathi R 


SB Sourabh Brajesh Sharma replied to Indumathi Ravi September 29, 2021 02:32 PM UTC

Hii  Indumathi Ravi,

Thank you for your Reply , but it won't help me at all.

for Data grid : i want to change grid header color according to chart theme . if we select Material theme than that theme should be applied only on grid header cell and not on text . Like these :



for Circular gauge : i want to change gauge Color according to differnt themes . in your example it is changing in background.


but i want to change for gauge and Needle Circular Bottom Shown in figure :


2021-09-29 19_56_45-SiMetry.png

please provide me ASAP so i can work on it ..



IR Indumathi Ravi Syncfusion Team September 30, 2021 03:32 PM UTC

Hi Sourabh, 
  
Thank you for the update. 
  
Please find the details for your queries from the below table. 
Queries 
Details 
for Data grid : i want to change grid header color according to chart theme . if we select Material theme than that theme should be applied only on grid header cell and not on text. 
We understand from your requirement, you want to change only header cell background column based on theme change. We can achieve your requirement by using the following CSS. Please find the code example and sample for your reference. 
  
Code snippet: 
[app.component.ts] 
public themeChange(args: any): void { 
    if (args.value == 'material') { 
      this.grid.getHeaderTable().classList.remove('material', 'bootstrap', 'fabric', 'bootstrap4'); 
      this.grid.getHeaderTable().classList.add('material'); 
    } 
     if(args.value == 'fabric'){ 
      this.grid.getHeaderTable().classList.remove('material', 'bootstrap', 'fabric', 'bootstrap4'); 
      this.grid.getHeaderTable().classList.add('fabric'); 
     } 
     if(args.value == 'bootstrap'){ 
      this.grid.getHeaderTable().classList.remove('material', 'bootstrap', 'fabric', 'bootstrap4'); 
      this.grid.getHeaderTable().classList.add('bootstrap'); 
     } 
     if(args.value == 'bootstrap4'){ 
      this.grid.getHeaderTable().classList.remove('material', 'bootstrap', 'fabric', 'bootstrap4'); 
      this.grid.getHeaderTable().classList.add('bootstrap4'); 
     } 
  } 
  
In your DropDownList change we added class name in Grid table based on your Theme name and apply the following CSS. 
  
[app.component.css] 
  
.e-grid .material .e-headercell, 
.e-grid .material .e-detailheadercell { 
  background-color: #e3165b; 
} 
.e-grid .fabric .e-headercell, 
.e-grid .fabric .e-detailheadercell { 
  background-color: #0078d6; 
} 
  
.e-grid .bootstrap .e-headercell, 
.e-grid .bootstrap .e-detailheadercell { 
  background-color: #0078d6; 
} 
  
.e-grid .bootstrap4 .e-headercell, 
.e-grid .bootstrap4 .e-detailheadercell { 
  background-color: #0078d6; 
} 
  
for Circular gauge : i want to change gauge Color according to differnt themes . in your example it is changing in background. 
The color of the axis line, major and minor ticks in the Circular Gauge varies depending on the theme. But the border of the pointer cap does not support the themes. However, we can change the border color of the pointer cap using “border” property for each theme. We have set the axis line color to the border of the pointer cap in the “loaded” event. Please find the code snippet for setting the border color of the pointer cap below. 
   
Code snippet: 
[app.component.html]  
<ejs-circulargauge  (loaded)="loaded($event)">  
  </ejs-circulargauge >  
  
[app.component.ts]  
   
public loaded(args: ILoadedEventArgs): void { 
    var lineColor = document 
      .getElementById('range-container_AxisLine_0') 
      .getAttribute('stroke'); 
    this.circulargauge.axes[0].pointers[0].cap.border.color = lineColor; 
  } 
  
We have created a simple sample to demonstrate the same and it can be found from the below link. 
  
  
Please let us know if you need any further assistance. 
  
Regards, 
Indumathi R 


SB Sourabh Brajesh Sharma replied to Indumathi Ravi October 5, 2021 03:56 PM UTC

Hii   Indumathi Ravi,

I am using sparkline chart and in that i want to use different themes , So that if i want to switch my theme to MAterial,fabric ,HighContrast or any themes. So Sparkline Chart should Get Color of that respected theme. So i had used your Code but in that Fill Color is applying on sparkline , not theme Color .

Your Code:

<ejs-sparkline id='container' width='350px' height='200px' [axisSettings]= 'axisSettings' theme= 'Highcontrast' [dataLabelSettings]= 'dataLabelSettings' [tooltipSettings]= 'tooltipSettings' [border]= 'border'  [dataSource]="data" fill= '#007dd1' type="Line">
</ejs-sparkline>


please give me Some code which will satisfy mine requirement .

I request you to provide Tomorrow afternoon .

Please


IR Indumathi Ravi Syncfusion Team October 6, 2021 04:19 PM UTC

Hi Sourabh, 

We have validated your reported scenario. As of now, theme support is provided for data labels and track line of sparkline. We have prepared sample based on your requirement. Please check with below snippet and screenshot. 

<ejs-sparkline theme='Highcontrast'> </ejs-sparkline> 

  



Kindly revert us if you have any concerns. 

Regards, 
Indumathi 


Loader.
Up arrow icon