Overview

The Candlestick Chart Component - Demo is a practical demonstration of how to use the Candlestick Chart Component in OutSystems applications. This documentation outlines how to integrate, configure, and use the component effectively in your applications.

Key Features

1. Drag-and-Drop Integration: Learn how to drag and drop the "CandleChart" web block into your screen.

2. Dataset Binding: Pass a sample dataset containing keys such as Date, Open, High, Low, Close, and more to the web block.

3. Interactive Chart Features: Explore zoom, pan, and hover functionalities for detailed insights.

4. Customizable Appearance: Adjust the chart's bullish (UpColor) and bearish (DownColor) candle colors.

5. Annotations: Use the Note field to add annotations or additional data insights.

Step-by-Step Guide

1. Adding the Web Block

1. Open your OutSystems application.

2. Navigate to the screen where you want to display the candlestick chart.

3. Drag and drop the "CandleChart" web block from the components panel onto your screen.

2. Configuring the Dataset

1. Create a dataset with the following keys:

   • Date: (DateTime) The date corresponding to the candlestick.

   • Open: (Decimal) The opening price.

   • High: (Decimal) The highest price.

   • Low: (Decimal) The lowest price.

   • Close: (Decimal) The closing price.

   • Volume: (Integer) The trading volume (optional).

   • UpColor: (Text) The color for bullish candles (e.g., green).

   • DownColor: (Text) The color for bearish candles (e.g., red).

   • PercentageChange: (Decimal) The percentage change in price (optional).

   • Note: (Text) Additional annotations or notes (optional).

2. Pass this dataset to the "CandleChart" web block as an input parameter.

3. Customizing the Chart

1. Configure the UpColor and DownColor inputs to change the appearance of bullish and bearish candles.

2. Add optional fields like Note or PercentageChange for enhanced chart functionality.

4. Running the Application

1. Publish your application.

2. Open the screen where the chart is added.

3. The candlestick chart will render dynamically based on the input dataset.

Example Dataset Structure

[
  {
    "Date": "2025-01-01T09:00:00",
    "Open": 100.5,
    "High": 105.2,
    "Low": 99.8,
    "Close": 103.7,
    "Volume": 1500,
    "UpColor": "#00FF00",
    "DownColor": "#FF0000",
    "PercentageChange": 2.5,
    "Note": "Opening of the year"
  },
  {
    "Date": "2025-01-02T09:00:00",
    "Open": 103.7,
    "High": 108.4,
    "Low": 102.5,
    "Close": 107.1,
    "Volume": 2000,
    "UpColor": "#00FF00",
    "DownColor": "#FF0000",
    "PercentageChange": 3.2,
    "Note": "Second day of trading"
  }
]

Use Cases

• Stock Market Applications: Display candlestick charts to visualize stock price movements.

• Cryptocurrency Dashboards: Track real-time cryptocurrency prices and trends.

• Financial Reports: Add interactive charts to financial dashboards.

• Custom Applications: Use in any application requiring time-series data visualization.

Benefits

• Simplified integration with a drag-and-drop approach.

• Fully customizable and interactive charts.

• Minimal configuration required to display complex financial data.

Troubleshooting

1. Chart Not Rendering: Ensure the dataset is correctly formatted and passed to the web block.

2. Incorrect Colors: Verify the UpColor and DownColor inputs.

3. Missing Data Points: Check that all required keys (Date, Open, High, Low, Close) are included in the dataset.

Conclusion

The Candlestick Chart Component - Demo provides a quick and intuitive way to integrate and use candlestick charts in OutSystems applications. By following the steps and using the example dataset, developers can seamlessly create professional-grade financial visualizations with minimal effort.