Customising widgets through Syncfusion Dashboard Designer platform

Question

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.

Answer 1

@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.

[

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

[

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:

Answer 2

There is no way to change the font size now, but Syncfusion is working on providing this capability and it is expected to be added in the next release (October 2018).

Syncfusion Dashboard Feature Request 20627