> ## Documentation Index > Fetch the complete documentation index at: https://docs.evidence.studio/llms.txt > Use this file to discover all available pages before exploring further. # Candlestick > Display a candlestick chart for OHLC (Open, High, Low, Close) financial data visualization Basic Usage ````liquid theme={null} ```sql stock_prices SELECT '2024-01-01'::date as date, 100.0 as open, 105.0 as high, 95.0 as low, 102.0 as close UNION ALL SELECT '2024-01-02'::date, 102.0, 108.0, 100.0, 105.0 UNION ALL SELECT '2024-01-03'::date, 105.0, 110.0, 103.0, 108.0 UNION ALL SELECT '2024-01-04'::date, 108.0, 112.0, 106.0, 104.0 UNION ALL SELECT '2024-01-05'::date, 104.0, 107.0, 98.0, 100.0 ``` {% candlestick data="stock_prices" x="date" open="open" high="high" low="low" close="close" y_axis_options={ min=90 max=115 } /%} ```` ## Examples ### Basic Usage Basic Usage ````liquid theme={null} ```sql stock_prices SELECT '2024-01-01'::date as date, 100.0 as open, 105.0 as high, 95.0 as low, 102.0 as close UNION ALL SELECT '2024-01-02'::date, 102.0, 108.0, 100.0, 105.0 UNION ALL SELECT '2024-01-03'::date, 105.0, 110.0, 103.0, 108.0 UNION ALL SELECT '2024-01-04'::date, 108.0, 112.0, 106.0, 104.0 UNION ALL SELECT '2024-01-05'::date, 104.0, 107.0, 98.0, 100.0 ``` {% candlestick data="stock_prices" x="date" open="open" high="high" low="low" close="close" y_axis_options={ min=90 max=115 } /%} ```` ### With Volume With Volume ````liquid theme={null} ```sql stock_prices SELECT '2024-01-01'::date as date, 100.0 as open, 105.0 as high, 95.0 as low, 102.0 as close, 1500000 as volume UNION ALL SELECT '2024-01-02'::date, 102.0, 108.0, 100.0, 105.0, 2100000 UNION ALL SELECT '2024-01-03'::date, 105.0, 110.0, 103.0, 108.0, 1800000 UNION ALL SELECT '2024-01-04'::date, 108.0, 112.0, 106.0, 104.0, 2500000 UNION ALL SELECT '2024-01-05'::date, 104.0, 107.0, 98.0, 100.0, 3200000 ``` {% candlestick data="stock_prices" x="date" open="open" high="high" low="low" close="close" volume="volume" y2_fmt="num0" title="Stock Price with Volume" y_axis_options={ min=90 max=115 } /%} ```` ### With Custom Colors With Custom Colors ````liquid theme={null} ```sql stock_prices SELECT '2024-01-01'::date as date, 100.0 as open, 105.0 as high, 95.0 as low, 102.0 as close UNION ALL SELECT '2024-01-02'::date, 102.0, 108.0, 100.0, 105.0 UNION ALL SELECT '2024-01-03'::date, 105.0, 110.0, 103.0, 108.0 UNION ALL SELECT '2024-01-04'::date, 108.0, 112.0, 106.0, 104.0 UNION ALL SELECT '2024-01-05'::date, 104.0, 107.0, 98.0, 100.0 ``` {% candlestick data="stock_prices" x="date" open="open" high="high" low="low" close="close" chart_options={ up_color="#22c55e" down_color="#ef4444" } y_axis_options={ min=90 max=115 } /%} ```` ## Attributes Name of the table or view to query IDs of filters to apply to the query Use date\_range to filter data for specific time periods. Accepts predefined ranges (e.g., "last 12 months"), dynamic ranges (e.g., "Last 90 days"), custom date ranges (e.g., "2020-01-01 to 2023-03-01"), or partial ranges (e.g., "from 2020-01-01", "until 2023-03-01") **Example:** ``` date_range={ range = "today" date = "string" } ``` **Attributes:** * range: `string` - Time period to filter. Use presets like 'last 7 days', dynamic patterns like 'Last 90 days', custom ranges like '2020-01-01 to 2023-03-01', or partial ranges like 'from 2020-01-01'. * **Allowed values:** * `today` * `yesterday` * `last 7 days` * `last 30 days` * `last 3 months` * `last 6 months` * `last 12 months` * `previous week` * `previous month` * `previous quarter` * `previous year` * `this week` * `this month` * `this quarter` * `this year` * `next week` * `next month` * `next quarter` * `next year` * `week to date` * `month to date` * `quarter to date` * `year to date` * `all time` * date: `string` - Date column to filter on. Required when the data has multiple date columns. Bucket dates into a grain. Pass the raw date column as `x` and the chart truncates and groups for you. Temporal grains (`day`, `week`, `month`, `quarter`, `year`, `hour`) preserve the year — use for time-series. Seasonality grains (`day of week`, `day of month`, `day of year`, `week of year`, `month of year`, `quarter of year`) collapse across years — use for cyclical patterns like "which month sells most regardless of year". **Allowed values:** * `day` * `week` * `month` * `quarter` * `year` * `hour` * `day of week` * `day of month` * `day of year` * `week of year` * `month of year` * `quarter of year` Column for x-axis (typically date/time) Column for opening price Column for high price Column for low price Column for closing price Column for trading volume (displayed as bars on secondary y-axis) Format for x-axis values and labels. See [Value Formatting](/core-concepts/value-formatting) for available formats. Format for y-axis values and labels. See [Value Formatting](/core-concepts/value-formatting) for available formats. Format for secondary y-axis (volume) values. See [Value Formatting](/core-concepts/value-formatting) for available formats. Title to display above the component Subtitle to display below the title Information tooltip text (can only be used with title). Displays an info icon next to the title. URL to link the info text to (can only be used with info) Create a custom link title for the info link, placed after the info text (can only be used with info\_link) Configure the y-axis **Example:** ``` y_axis_options={ title = "string" title_position = "top" ticks = true baseline = true labels = true gridlines = true min = 0 max = 0 fit_to_data = true interval = 0 } ``` **Attributes:** * title: `string` * title\_position: `string` - Position of the axis title. "top" places it horizontally at the top, "side" places it vertically along the axis. Defaults to "side" for 100% stacked charts, "top" otherwise. * **Allowed values:** * `top` * `side` * ticks: `boolean` * baseline: `boolean` * labels: `boolean` - Show/hide axis labels * gridlines: `boolean` - Show/hide gridlines * min: `number` - Minimum value for this axis (number for numeric axes, date string for date axes) * max: `number` - Maximum value for this axis (number for numeric axes, date string for date axes) * fit\_to\_data: `boolean` - Fit the axis to the data instead of including 0 * interval: `number` - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ. Configure the x-axis **Example:** ``` x_axis_options={ title = "string" show_title = true label_wrap = true ticks = true baseline = true labels = true gridlines = true min = 0 max = 0 fit_to_data = true min_interval = "year" max_interval = "year" interval = 0 label_rotate = 0 title_arrow = true max_label_length = 0 } ``` **Attributes:** * title: `string` * show\_title: `boolean` - When `true`, renders the auto-derived axis title (the x column name) below the chart. Ignored when `title` is set explicitly. Defaults to `false` — auto-derived column-name titles usually read as visual noise and the axis labels speak for themselves. * label\_wrap: `boolean` * ticks: `boolean` * baseline: `boolean` * labels: `boolean` - Show/hide axis labels * gridlines: `boolean` - Show/hide gridlines * min: `number` - Minimum value for this axis (number for numeric axes, date string for date axes) * max: `number` - Maximum value for this axis (number for numeric axes, date string for date axes) * fit\_to\_data: `boolean` - Fit the axis to the data instead of including 0 * min\_interval: `string` - Minimum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ. * **Allowed values:** * `year` * `quarter` * `month` * `week` * `day` * `hour` * max\_interval: `string` - Maximum interval between axis ticks for time-based axes. This option is a suggestion, the actual interval may differ. * **Allowed values:** * `year` * `quarter` * `month` * `week` * `day` * `hour` * interval: `number` - Interval between axis ticks for numeric axes. This option is a suggestion, the actual interval may differ. * label\_rotate: `number` - Rotation angle of axis label in degrees. Positive values rotate clockwise, negative values rotate counter-clockwise. * title\_arrow: `boolean` - Show/hide the arrow (⭢) on the axis title * max\_label\_length: `number` - Maximum character length for axis labels. Labels exceeding this length will be truncated with an ellipsis. Defaults to 20 characters when labels are rotated. Candlestick chart configuration options **Attributes:** * up\_color: `string` - Color for bullish (up) candles * down\_color: `string` - Color for bearish (down) candles * zoom: `boolean` - Enables zoom by dragging on the chart area Time in seconds between automatic data refreshes (minimum 30). Overrides the page-level auto-refresh setting for this component. Custom SQL WHERE condition to apply to the query. For date filters, use date\_range instead. Custom SQL HAVING condition to apply to the query after GROUP BY Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows. Column name(s) with optional direction (e.g. "column\_name", "column\_name desc") Custom SQL QUALIFY condition to filter windowed results Set the width of this component (in percent) relative to the page width Set a fixed height for the chart in pixels Link this chart to others sharing the same id, syncing their tooltips, axis-pointer, and zoom Extra columns to include in the tooltip on hover. Each entry is `{ value, label?, fmt?, color_by_sign?, down_is_good? }`. See the [tooltip fields guide](/components/tooltip-fields) for examples. Raw [ECharts options](https://echarts.apache.org/en/option.html) deep-merged over the chart's final configuration. Use for anything the structured props do not expose — `graphic`, `visualMap`, tooltip styling, and so on. Partial overrides win key-by-key without clobbering Studio's computed siblings. For overrides scoped to the data series, use `echarts_series_options`. **Example:** ``` echarts_options={ tooltip={ position="top" } graphic=[{ type="text" }] } ```