https://github.com/facioquo/stock-charts
Stock charting website that demonstrates the Skender.Stock.Indicators NuGet package. It's an Angular website with a .NET Web API for backend generation of indicators.
https://github.com/facioquo/stock-charts
angular angular-material demo dotnetcore stock-analysis stock-chart
Last synced: 19 days ago
JSON representation
Stock charting website that demonstrates the Skender.Stock.Indicators NuGet package. It's an Angular website with a .NET Web API for backend generation of indicators.
- Host: GitHub
- URL: https://github.com/facioquo/stock-charts
- Owner: facioquo
- License: apache-2.0
- Created: 2019-12-29T06:03:04.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2026-05-23T03:19:21.000Z (20 days ago)
- Last Synced: 2026-05-23T05:13:47.680Z (20 days ago)
- Topics: angular, angular-material, demo, dotnetcore, stock-analysis, stock-chart
- Language: TypeScript
- Homepage: https://charts.StockIndicators.dev
- Size: 4.39 MB
- Stars: 81
- Watchers: 6
- Forks: 31
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Stock Indicators for .NET demo
A demo showcasing the [Skender.Stock.Indicators](https://www.nuget.org/packages/Skender.Stock.Indicators) NuGet package with an Angular frontend, Chart.js charting, and a .NET Web API backend for financial indicators. See the [library documentation](https://dotnet.stockindicators.dev) for more examples, guides, and available indicators.
**Live demo:** [charts.StockIndicators.dev](https://charts.stockindicators.dev/)
## Author's note
This repo and charting tool is primarily intended to demonstrate the [Stock Indicators for .NET](https://dotnet.stockindicators.dev) library. **It is not meant to be a fully featured charting system** and may not be an architectural model that works for your use case. If you need a mature charting tool, please explore all of your [charting and visualization options](https://github.com/DaveSkender/Stock.Indicators/discussions/430).
## Quick start
### Prerequisites
**All platforms:**
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/) (v24 LTS or later)
- [pnpm](https://pnpm.io/) (v11 or later) - Installed via platform package managers:
- **macOS**: Homebrew (`brew install pnpm`)
- **Windows**: winget (`winget install pnpm.pnpm`)
- **Linux**: Corepack (`corepack enable && corepack prepare pnpm --activate`)
- [Angular CLI](https://angular.dev/tools/cli) - Use the workspace CLI through `pnpm --filter @stock-charts/client exec ng`
- [.NET SDK](https://dotnet.microsoft.com/download/dotnet) (v10.0 or later)
- [Azure Functions Core Tools](https://learn.microsoft.com/azure/azure-functions/functions-run-local) (v4) - **Required for backend development**
- [Visual Studio Code](https://code.visualstudio.com/) (recommended) or [Visual Studio](http://visualstudio.com)
After installing the prerequisites above, run `pnpm install` from the repository root.
**Note:** Azure Functions Core Tools is essential for running the backend Azure Functions locally (`func start` command) and must be [installed separately](https://learn.microsoft.com/azure/azure-functions/functions-run-local#install-the-azure-functions-core-tools) on Linux.
### Setup and run
```bash
# Clone and install
git clone https://github.com/facioquo/stock-charts.git
cd stock-charts
pnpm install
# Start development environment
# Option 1: Use VS Code
# Ctrl+Shift+P → "Tasks: Run Task" → "Run: Full development stack"
# Option 2: Manual start in separate terminals
pnpm run azure:start # Terminal 1: Storage emulator
cd server/Functions && func start # Terminal 2: Azure Functions
cd server/WebApi && dotnet run # Terminal 3: Web API
pnpm start # Terminal 4: Angular dev server
```
**Access:** Website at , Web API at , Functions at
## Financial charts
Financial chart support (`candlestick`, `ohlc`, `volume`) is integrated as typed, modular Chart.js workspace packages under `libs/chartjs-financial` and `libs/indy-charts`.
- Register once at startup with `setupIndyCharts()` (already called from `client/src/main.ts`).
- Use OHLC data points in `{ x, o, h, l, c }` shape where `x` is a timestamp.
- Theme candle/volume colors via `getFinancialPalette()` + `applyFinancialElementTheme()`.
- Use factories (`buildCandlestickDataset`, `buildVolumeDataset`, `buildFinancialChartOptions`) for consistent typed chart config.
- For large datasets (5k-10k candles), prefer `animation: false`, keep tooltip interaction non-intersecting, and avoid unnecessary redraws.
This integration is derived from [chartjs-chart-financial](https://github.com/chartjs/chartjs-chart-financial) and keeps upstream license attribution in source headers.
## AI agents
For AI coding agents (GitHub Copilot, Claude, etc.), see [AGENTS.md](AGENTS.md) for comprehensive project context including:
- Primary and secondary directives
- Repository structure with permissions
- Commands and code style patterns
- Technology conventions and boundaries
- Development workflow
## Development and contributing
For detailed development setup, testing, linting, formatting, and contribution workflow, see the [contributing guidelines](docs/CONTRIBUTING.md).
## License
This project is licensed under the Apache 2.0 License - see [LICENSE](LICENSE) for details.