Blazor StockChart Dark Theme

[J]

Hi,

Is there a Dark Theme for Blazor (Client-Side) > StockChart?  We see a Dark Theme for Circular Gauge but not StockChart.  

Thanks,
Jason

[Baby Palanidurai]

Hi Jason, 

Greetings from Syncfusion. 

We have analyzed your query, Stock Chart also supports dark themes like MaterialDark, FabricDark and BootstrapDark. Based on your requirement, we have prepared a simple stock sample in dark theme, use Theme property in stock chart to change the default theme and refer the corresponding CSS file.  

<EjsStockChart id="container" Theme="ChartTheme.MaterialDark"> 

</EjsStockChart> 

Download the CSS from the below CRG site, 

https://crg.syncfusion.com/ 

 

And for your reference, we have attached the theme files in the sample itself.  

Screenshot:  

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/DarkStockChart-1382758867 

Kindly revert us, if you need further assistance. We are always happy in assisting you. 

Regards, 

Baby. 

[J]

Hi, thanks for the example.  Still writing in Blazor and enabled the Dark theme. However, The title bar is stays white.  How can I get the title bar dark too. See attached image.  This is with version 17.3.0.28.  Thanks. 

<EjsStockChart id="stockSummaryChart" Title="" Theme="ChartTheme.BootstrapDark" EnablePeriodSelector="true" IndicatorType="@IndicatorType" TrendlineType="@TrendlineType" SeriesType="@SeriesType" ExportType="@ExportType">

<StockChartChartBorder Width="0"></StockChartChartBorder>

<StockChartSeriesCollection>

<StockChartSeries DataSource="@lChartQuoteTickSimpleList" XName="Date" YName="Y" Volume="Volume" Type="ChartSeriesType.Line"></StockChartSeries>

</StockChartSeriesCollection>

</EjsStockChart>

Attachment: chart_5b7fd816.zip

[Bhuvanesh Valarman]

Hi Jason, 

We have analyzed your query. From that we suggest you to refer bootstrap-dark theme CSS file in your application. You can download this CSS file from the below CRG site as we stated in the previous update. 

CRG: https://crg.syncfusion.com/  

Also you can find our generated bootstrap-dark CSS file below. 

CSS file link:  https://www.syncfusion.com/downloads/support/directtrac/general/7z/bootstrap-dark-1994062058  

 

We have prepared sample for your reference please find the below sample. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/7z/StockChartBootstrapDark-279484097   

Code Snippet: [Index.html] 

 

Screenshot:  

 

Kindly revert us, If the suggestion provided did not work for your application and replicate the issue in our shared sample. 

Regards, 

Bhuvanesh V. 

  

[J]

Thanks for the reply and demo project.  I changed my project to server-side blazor.  I was able to get the dark-theme title bar working with Client-Side Blazor however unable to get it working with Server-Side Blazor.  Any tips or example project for Server-Side Blazor would be appreciated.  

Additionally, where can I download the bootstrap-dark.css file online (specifically, where is the source of that file)?  Is this the file:

https://github.com/ForEvolve/bootstrap-dark/tree/master/app/wwwroot/css/bootstrap-dark.css

[Srihari Muthukaruppan]

Hi Jason, 

  

Please find the chart related query response. 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Query #1: unable to get it working with Server-Side Blazor? 

 

We have analyzed your query, From that, we would like to let you know that the Stock chart is working fine for dark theme. Unfortunately we are unable to reproduce the issue. We have also attached the sample used by testing. Please find the below sample and screenshot. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/StockchartServer707236589.zip  

  

Screenshot: 

   

 

Query #2: where can I download the bootstrap-dark.css file online? 

  

We have analyzed your query. From that we would like to let you know that we can download the CSS from the below CRG site,  

Download link: https://crg.syncfusion.com/  

 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Let us know if you have any concerns. 

  

Regards, 

Srihari M 

[J]

Your screenshot proves my point.  The menu bar of the chart is light theme. The menu bar is the part of the chart where it shows: "Series Indicators Trendlines  1M 3M 6M ...".  The chart is dark but the menu is light.  

So the menu bar on Client side is dark and the menu bar on Server side is light theme.  How can I make the menu bar dark on Server side?  

[J]

Attached two images show side by side comparison of Stock Chart on Client-Side Blazor vs Server-Side Blazor.  

Attachment: Comparison_b94f1e3b.zip

[Srihari Muthukaruppan]

Hi Jason,  

Sorry for the inconvenience. 

We have analyzed your query. From that we suspect that the issue is due to the stylesheet of theme is not referred properly. Based on that we have also prepared a sample for your reference. We have also attached the download link in which bootstrapDark theme css file can be downloaded. Please find the below code snippet and sample for reference. 

 

Code snippet: 

 

_Host.cshtml: 

<html lang="en"> 

<head> 

    <meta charset="utf-8" /> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

    <title>DarkStockChartServerApp</title> 

    <base rel='nofollow' href="~/" /> 

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" /> 

    <link rel='nofollow' href="css/site.css" rel="stylesheet" /> 

    <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script> 

    <link rel='nofollow' href="~/css/bootstrap-dark.css" rel="stylesheet" /> 

    <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ejs.interop.min.js"></script> 

</head> 

<body> 

    <app> 

        <component type="typeof(App)" render-mode="ServerPrerendered" /> 

    </app> 

 

    <div id="blazor-error-ui"> 

        <environment include="Staging,Production"> 

            An error has occurred. This application may no longer respond until reloaded. 

        </environment> 

        <environment include="Development"> 

            An unhandled exception has occurred. See browser dev tools for details. 

        </environment> 

        <a rel='nofollow' href class="reload">Reload</a> 

        <a class="dismiss">🗙</a> 

    </div> 

 

    <script src="_framework/blazor.server.js"></script> 

</body> 

</html> 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DarkStockChartServerApp-1439096674.zip  

 

Screenshot: 

 

 

we would like to let you know that we can download the CSS from the below CRG site,   

Download link: https://crg.syncfusion.com/   

 

Let me know, if you have any concerns.  

  

Regards  

Srihari M 

[J]

It works!  

Added:

    link rel='nofollow' rel='nofollow' href="~/css/bootstrap-dark.css" rel="stylesheet" 

Removed:

    link rel='nofollow' rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet"

It would not work until the material.css link was removed.  

Thanks for your help. 

[Srihari Muthukaruppan]

Hi Jason,  

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M