Change color of chart axis font and labels ( light theme and dark theme)
Hi
We have our own light theme and dark theme , and for syncfusion charts to adopt those theme i have to update the color for the chart axis labels. and legend labels,etc. Refer followinf
SIGN IN To post a reply.
9 Replies
Hi Jitendra,
We can achieve your requirement using labelStyle and textStyle property in the axis and legendsettings respectively. Based on that we have prepared a sample for your reference. We also attached the documentation link for your reference. Please find the sample, UG link, code snippet and screenshot below.
Code Snippet:
|
<ejs-chart style='display:block' [legendSettings]="legendSettings" align='center' id='chartcontainer'
[primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [tooltip]='tooltip' (load)='load($event)'
[chartArea]='chartArea' [width]='width'>
<e-series-collection>
<e-series [dataSource]='data' type='Line' xName='x' yName='y' name='Germany' width=2 [marker]='marker'>
</e-series>
</e-series-collection>
</ejs-chart>
// add your additional code here
public primaryXAxis: Object = {
valueType: 'DateTime',
labelStyle: {
size: '14px',
color: 'white',
fontFamily: 'Segoe UI',
fontWeight: 'bold'
},
};
public primaryYAxis: Object = {
labelStyle: {
size: '14px',
color: 'white',
fontFamily: 'Segoe UI',
fontWeight: 'bold'
},
};
public legendSettings: Object = {
textStyle: {
size: '14px',
color: 'white',
fontFamily: 'Segoe UI',
fontWeight: 'bold'
}
};
// add your additional code here
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
How to change color of period selector also why unselected region in range nvaigator does have grey shading
need fix for :
- color of period selector as per theme
- remove grey shades from unselected region
- labels (months) color as per theme
Hi Jitendra ,
We have prepared sample based on your requirement with Highcontrast theme. By default, based on provided theme period selector, unselected region and labels color will be changed automatically. Please check with the below sample and screenshot.
Kindly ensure whether you have specified color for unselected region and labels.
Regards,
Durga GThanks for your reply it worked partially.
As we are having our own themes as per our design system, i prefer not to use highcontrast theme.
i can achieve with above solution is :
But still labels and the bar of period selector is open issue for me.
also i need to change color of grouping bar as well as pagination bar for data grid
still there are some issues. got pager container
:root { --groupheader-color: var(--element-ui-1); }
.e-grid .e-table {
background-color: var(--element-base-1) !important;
}
.e-grid .e-rowcell {
color: var(--element-ui-1) !important;
}
/* Group drop area */
.e-grid .e-groupdroparea,
.e-grid .e-groupdroparea.e-hover,
.e-grid .e-groupdroparea.e-grouped {
background-color: var(--element-base-1);
}
/* Grid pager root element */
.e-grid .e-gridpager {
background-color: var(--element-base-1);
}
.e-pager .e-pagercontainer {
background-color: var(--element-base-1) !important;
}
.e-grid .e-headercell.ViridianGreen{
background-color: #009999;
color: white;
font-size: 40px;
font-weight: 800;
}
.e-grid .e-headercell.Brown{
background-color: #c67954;
color: white;
font-size: 40px;
font-weight: 800;
}
.e-grid .e-headercell.Blue{
background-color: #5473c6;
color: white;
font-size: 40px;
font-weight: 800;
}
.e-grid .e-headercell.Green{
background-color: #72c654;
color: white;
font-size: 40px;
font-weight: 800;
}
.e-grid .e-headercell.Violet{
background-color: #bc54c6;
color: white;
font-size: 40px;
font-weight: 800;
}
.e-grid .e-headercell.LightBlue{
background-color: #54bac6;
color: white;
font-size: 40px;
font-weight: 800;
}
.e-grid .e-groupdroparea.e-grouped {
background-color: var(--element-ui-4) ;
}
.e-grid .e-groupheadercell{
background-color: var(--groupheader-color) ;
}
.e-grid .e-indentcell {
background-color: var(--element-ui-4) ;
border-color: white;
}
.e-grid .e-recordplusexpand {
background-color: var(--element-ui-4) ;
border-color: white;
}
.e-grid .e-groupcaption {
background-color: var(--element-ui-4) ;
border-color: rgb(245, 242, 242);
}
.e-grid .e-recordpluscollapse {
background-color: var(--element-ui-4) ;
border-color: rgb(245, 242, 242);
}
.column-alignment {
align-items: center;
}
How to apply highcontrast or other theme to grid..i tried theme="XX"
i dont want to use your theme but i want to customize ..when i tried to overwrite page container css
.e-pager .e-pagercontainer {
background-color: var(--element-base-1) !important;
}
its not working 
SIGN IN To post a reply.
