Financial Chart - Beta

New topic in the right place to track my work in progress Financial Chart Custom Component.

@augustin.ziegler here is a Candlestick Chart with exponential moving averages 13 and 50 day.

React-Stockcharts is VERY specific about the format of the data. As I’m obtaining the data for my scenario with another process I’m putting the transformed CSV’s into a directory that the Control will obtain them from via a NodeJS WebServer (see below).

The format my module takes for the CSV Stock Data is to provide CSV delimited Stock Data with Header Columns;


Date format MUST be dd-mm-yyyy (e.g 17-01-2017)
This means single digits days of the month must be padded with '0’

Transform the data using PowerShell something like this;

  • Obtain your stock data from your source. Transform it for the correct date format and column headings
  • Export it to a folder removing quotes e.g
$1y | Select-Object | ConvertTo-Csv -NoTypeInformation -Delimiter "," | ForEach-Object { $_ -replace '"', '' } | ForEach-Object { $_ -replace '/', '-' } | ForEach-Object { $_ -replace ' 10:00:00 PM', '' } | ForEach-Object { $_ -replace ',1-', ',01-' } | ForEach-Object { $_ -replace ',2-', ',02-' } | ForEach-Object { $_ -replace ',3-', ',03-' } | ForEach-Object { $_ -replace ',4-', ',04-' } | ForEach-Object { $_ -replace ',5-', ',05-' } | ForEach-Object { $_ -replace ',6-', ',06-' } | ForEach-Object { $_ -replace ',7-', ',07-' } | ForEach-Object { $_ -replace ',8-', ',08-' } | ForEach-Object { $_ -replace ',9-', ',09-' } | out-file -encoding ASCII "c:\chartdata\AST-AX-1y.csv"

Here is the small Node Web Server Script that is the URI for the Control to get the data from. You can start that from PowerShell using;

# node server.js <datadir> <port>
& node server.js 'C:\chartdata' 10010

Here is the beta work in progress module if you want to test it. I’ve verified it works on two different machines.

Here is a sample UD using it

import-module UniversalDashboard.Community

if (Get-Module UniversalDashboard.UDFinancialChart) {
    Remove-Module UniversalDashboard.UDFinancialChart
import-module "$($env:USERPROFILE)\<path-to-module>\UniversalDashboard.UDFinancialChart\UniversalDashboard.UDFinancialChart.psm1" -Force 

Get-UDDashboard | Stop-UDDashboard

$Theme = New-UDTheme -Name "darrenjrobinson" -Definition @{
    '.dropdown-content'                                                                                 = @{
        'min-width' = '450px'
    '.btn-floating'                                                                                     = @{
        'background-color' = '#26a69a'
    '.collection .collection-item'                                                                      = @{
        'line-height' = '1.0rem'
        'padding'     = '5px 10px';
    '.ud-grid' = @{
        'color' = '#ffab40'
    '.card, .card-panel' = @{
         'color' = '#ffab40' 
    '.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating)' = @{
        'color' = '#ffab40' 

} -Parent DarkDefault

$myDashboard =  New-UDDashboard -Title " - Universal Dashboard Custom Financial Chart Component" -Content {    
    New-UdHtml -Markup "<b>Symbol:</b>AST</br>" 
        New-UDLayout -Columns 1 -Content {       
            New-FinancialChart -stockData "http://localhost:10010/AST-AX-3y.csv"   
} -Theme $Theme

Start-UDDashboard -ListenAddress -Port 10003 -Dashboard $myDashboard -Force



Great work … Will give it a try in the next days …

Awesome work @darrenjrobinson especially on your first component. There are many helpful people in these forums to name a few:-
@adam @AlonGvili @BoSen29 @wsl2001 @mylabonline
who have all helped me in the past on custom components. So just putting it out there that if you feel your stuck in a dead-end tunnel, then have the code available like on github and I am sure either myself or another helpful member will try to assist.
I too have to work with a lot of financial data so very excited to try this out.


I’ve built a live version too for intraday live udpates (1 min intervals).
The bottom lines showing trade volume and the upper level the trades.

Now if I could only pass in parameters earlier from the PSModule I would be able to build a single Module with multiple graph types PowerShell Module Params accessible before componentDidMount() rather than a module per graph type.



Some great progress this morning thx to @AlonGvili
I’ve been able to build a module with multiple graph types and with a little trickery get them to display concurrently on a page.

A couple of bugs to squish and an enhancement or two and I will be able to publish the module.



Version 1 is now available.
Blog Post with the details here
GitHub Repo here
PowerShell Gallery here



This is awesome! Nice work!

Just one comment. You can use Publish-UDFolder to serve that CSV for your stock data if you don’t want to start a node server:

Thx @adam
I went the Node Server route as it gave me complete control over MIME-Types and CORS etc. Does UDFolder allow MIME-Type configuration for differing file types?

UD uses the FIleExtensionsContentTypeProvider to set the mime types:

That said, UD doesn’t offer the ability to configure them nor the ability to configure cors so if you want more control node seems like a good way to go.

1 Like

Version 1.0.1 of my UniversalDashboard.UDFinancialChart Module is available (PS Gallery). It includes an additional 4 charts as shown below.

Candle Stick Chart with Bollinger Band Overlay

Candle Stick Chart with MA

Candle Stick Chart with MACD Indicator

Candle Stick Chart with RSI Indicator



Looks amazing! FYI, if you want this to show up on the UD Marketplace, you can include the ud-component tag in your manifest.

Thx. Ah, nice.

Is it possible to edit that in PSGallery rather than publishing another version with just the additional tag?


No, I don’t think so. Maybe just add the tag when you publish a new release :wink:

A new release means additional charts.
I’m taking requests.
Which additional Financial Chart(s) would anyone like added?


Final update.
Four New Charts
Powershell Gallery updated and now with the ud-component tag so it should also appear in the

Candle Stick Chart with SAR

Candle Stick Chart with Gann Fan

OHLC Char with Elder Ray Indicator

OHLC Chart with Elder Impulse Indicator



Hey all,

I needed a couple of additional charts, so have updated the component to v1.0.3.

v1.0.3 is now Code Signed and includes two additional charts;



Hey Adam, any reason my component isn’t showing in the Marketplace? It has the ud-component tag

There was an issue with the marketplace. Fixed now!

Awesome, thx @adam
Much appreciated.

1 Like