Search code examples
widgetdashboardsyncfusioncustomising

Customising widgets through Syncfusion Dashboard Designer platform

Can someone give me guidance on how I can customise widgets in Syncfusion. For Example if I drag a bar chart widget in designer and click to show values, I can't see an option where I can make font size of those values bigger. So is there any way I can do this in dashboard designer or do I need to purchase some add-ons to be able to do this? Any help would be greatly appreciated.

Solution

  • @user10200276: We can customize the font size of the Dashboard Widgets by overwriting the CSS style in Dashboard Server level. Find the documentation link for CSS class details and its usage for applicable Dashboard Widgets. Just add the required style class in the following Server locations for customizing the Font.

    Server Installed Location:

    C:\Syncfusion\Dashboard Server\DashboardServer.Web\Views\FileRender

    C:\Syncfusion\Dashboard Server\DashboardServer.Web\Views\EmbedFileRender

    In the above locations, 2 CSHTML files will present as like in the attached image.

    [Server CSHTML Files that need to be edited

    Open both files, move to the style tag, include the required styles and save the file.

    [Reference Image

    Now refresh the server in IIS manager and check the changes in browser by clearing the cache memory(i.e. Ctrl + F5).

    The following CSS style classes are used to customize the Bar Chart widget.

       /* Used to customize the Y axis title */
		.e-dashboardviewer .dashboardChartControl text[id*='YAxisTitle']{
		font-size: 16px !important;		
		}
		/* Used to customize the Y axis lables */
.e-dashboardviewer .dashboardChartControl text[id*='YLabel']{
		font-size: 16px !important;
		}
		/* Used to customize the X axis title */
		.e-dashboardviewer .dashboardChartControl text[id*='XAxisTitle']{
		font-size: 16px !important;
		}
		/* Used to customize the Primary X axis label */
		.e-dashboardviewer .dashboardChartControl text[id*='PrimaryAxis_XLabel']{
		font-size: 16px !important;
		}
		/* Used to customize the data labels item */
		.e-dashboardviewer .dashboardChartControl text[id*='SeriesText']{
		font-size: 16px !important;
		}
		/* Used to customize the legend item  */
		.e-dashboardviewer .dashboardChartControl text[id*='LegendItem']{
		font-size: 16px !important;
		}

    Reference Screenshot:

    Bar Chart Reference Image