We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Blazor StockChart Dark Theme

Thread ID:

Created:

Updated:

Platform:

Replies:

144777 May 21,2019 01:58 PM UTC Dec 1,2019 06:51 AM UTC Angular - EJ 2 10
loading
Tags: Chart
J
Asked On May 21, 2019 01:58 PM UTC

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 [Syncfusion]
Replied On May 22, 2019 12:22 PM UTC

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, 


 

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

Screenshot:  
 


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

Regards, 
Baby. 


J
Replied On November 22, 2019 09:55 PM UTC

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 [Syncfusion]
Replied On November 25, 2019 10:57 AM UTC

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. 
Also you can find our generated bootstrap-dark CSS file below. 
 
We have prepared sample for your reference please find the below sample. 

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
Replied On November 25, 2019 11:57 PM UTC

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:






Srihari Muthukaruppan [Syncfusion]
Replied On November 27, 2019 03:26 AM UTC

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. 
  
  
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
Replied On November 27, 2019 10:11 AM UTC

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
Replied On November 27, 2019 10:15 AM UTC

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 [Syncfusion]
Replied On November 28, 2019 02:05 PM UTC

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" /> 
    <link rel='nofollow' href="~/css/bootstrap-dark.css" rel="stylesheet" /> 
</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> 
  
 
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
Replied On November 30, 2019 08:17 PM UTC

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 [Syncfusion]
Replied On December 1, 2019 06:51 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon