Chart Types

ChartSpire provides a variety of chart types to visualize financial data, allowing traders and analysts to view market information in different ways for comprehensive technical analysis.

Available Chart Types

Candlestick Charts

The standard candlestick chart is the most popular chart type for technical analysis, displaying open, high, low, and close (OHLC) price data over specific time intervals.

ChartSpire offers several candlestick variations:

• Solid Candlesticks: Traditional candlestick chart with filled candle bodies
• Hollow Candlesticks: Outline-only candles, useful for reducing visual noise
• Up/Down Hollow: Combines filled and hollow candles based on price direction
• OHLC Bars: Traditional bar chart showing price range with open and close ticks

Example:

// Set chart type to solid candlesticks
chart.setStyles({
  candle: {
    type: 'candle_solid'
  }
})

Line and Area Charts

Line and area charts simplify price visualization by focusing on close prices:

• Line Chart: Simple line connecting closing prices
• Area Chart: Line chart with filled area below, emphasizing volume

Example:

// Set chart type to area chart
chart.setStyles({
  candle: {
    type: 'area'
  }
})

Heikin-Ashi

Heikin-Ashi is a modified candlestick chart that averages price data to filter out market noise and identify trends more clearly. It's particularly helpful for detecting trend direction and reversals.

// Set chart type to Heikin-Ashi
chart.setStyles({
  candle: {
    type: 'heikin_ashi'
  }
})

Renko Charts

Renko charts are specialized charts that filter out minor price movements to focus on significant trends. Unlike time-based charts, Renko creates a new "brick" only when the price moves a specified amount (brick size), regardless of time elapsed.

Renko Chart Benefits:

• Reduced Noise: Filters out minor price fluctuations
• Clear Trend Visualization: Easy identification of trends and reversals
• Simplified Analysis: Focuses on price movement rather than time

Configuring Renko Charts:

1. Select Renko Chart Type:

   // Switch to Renko chart type
   chart.setStyles({
     candle: {
       type: 'renko'
     }
   })

2. Configure Brick Size:

   // Set Renko brick size
   chart.setStyles({
     candle: {
       type: 'renko',
       renko: {
         brick: {
           size: 10 // Price amount for brick formation
         }
       }
     }
   })

Renko Chart Interaction:

Right-click on a Renko chart to access the brick size settings dialog, which allows you to adjust the brick size for different granularity of price movement.

Switching Between Chart Types

Via User Interface

ChartSpire provides a simple dropdown menu for switching between chart types:

1. Locate the chart type selector in the top toolbar (shows the current chart type icon)
2. Click the selector to open the dropdown menu
3. Select the desired chart type from the available options

The chart will immediately update to reflect the selected chart type.

Via API

You can programmatically change the chart type using the setStyles method:

// Import the exported CandleType type from chartspire
import type { CandleType } from 'chartspire'

// Switch to a different chart type
const chartType: CandleType = 'area'

chart.setStyles({
  candle: {
    type: chartType
  }
})

Supported candle type values:

• 'candle_solid' - Solid candlesticks
• 'candle_stroke' - Hollow candlesticks
• 'candle_up_stroke' - Up candles hollow, down candles filled
• 'candle_down_stroke' - Down candles hollow, up candles filled
• 'ohlc' - OHLC bars
• 'area' - Area chart
• 'heikin_ashi' - Heikin-Ashi candlesticks
• 'renko' - Renko chart type

Customization Options

Each chart type supports various customization options to enhance visual analysis:

Candlestick Customization

chart.setStyles({
  candle: {
    type: 'candle_solid',
    upColor: '#26A69A',      // Color for rising candles
    downColor: '#EF5350',    // Color for falling candles
    upBorderColor: '#26A69A', // Border color for rising candles
    downBorderColor: '#EF5350', // Border color for falling candles
    wickUpColor: '#26A69A',   // Wick color for rising candles
    wickDownColor: '#EF5350'  // Wick color for falling candles
  }
})

Area Chart Customization

chart.setStyles({
  candle: {
    type: 'area',
    area: {
      lineColor: '#2196F3',     // Line color
      fillColor: 'rgba(33, 150, 243, 0.1)'  // Fill color with transparency
    }
  }
})

Renko Chart Customization

chart.setStyles({
  candle: {
    type: 'renko',
    renko: {
      brick: {
        size: 15,           // Brick size
        upColor: '#26A69A', // Up brick color
        downColor: '#EF5350' // Down brick color
      }
    }
  }
})