Skip to main content
SimilarExport ZIP
100%

Candlestick

✓ Published0🌍 Public
AAriel Fuggini
Last edited Jan 27, 2023
Created on Jan 27, 2023
Forked from HTML Starter

This example displays a candlestick chart, a financial visualization showing the open, high, low, and close prices for a series of dates. The code renders five candlesticks as SVG rectangles for the price range between open and close, with vertical lines for the high and low extremes. The chart uses d3.scaleTime and d3.scaleLinear to map dates and prices to the 600 by 400 pixel canvas, and d3.axisBottom and d3.axisLeft to draw the axes. Each candlestick is colored green or red via CSS classes based on whether the closing price is higher or lower than the opening price.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

candle sticks

This example renders a scrollable SVG candlestick chart from synthetic financial data. Each candle shows open, high, low, and close prices, with green bodies for rising periods and red for falling ones, plus a vertical wick for the high-low range. The code generates a sequence of random price movements starting from a base value, then constructs SVG elements directly using native DOM APIs like `document.createElementNS` and `setAttribute`. No charting library is used; instead, candles are positioned and scaled manually within a large SVG canvas.

Pparag776
88% match
Loading thumbnail…

Candlestick

This candlestick chart visualizes stock price movements over time, with each candle representing a single trading day’s open, high, low, and close values. The chart uses d3fc’s `seriesSvgCandlestick` to render the candlesticks, and a discontinuous time scale to skip weekends, ensuring a continuous trading week. The x-axis domain is derived from the date extent, while the y-axis domain is calculated from the high and low price values. Data is loaded from a CSV file containing daily Apple stock prices from March to June 2014. The visualization employs the d3fc library's chartCartesian component for layout, with an SVG plot area and a left-oriented y-axis, providing a clean and functional representation of price movements over time.

CColinEberhardt
83% match
Loading thumbnail…

candleBars

A candlestick chart visualizes stock price movements over time, showing daily open, high, low, and close values using red and green bars. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for price values. Each candle consists of a thin line for the high-low range and a rectangle for the open-close spread, colored green for down days and red for up days. Data comes from a CSV file containing date, price, volume, and return columns.

深深度碎片
82% match
Loading thumbnail…

return-line & candleBars-background

A stock chart combines candlestick bars with a pink return line overlaid on the same time axis. The candlesticks show open, high, low, and close prices, colored red when price rises and green when it falls. The return line uses a distinct y-axis scale, while the candlestick bars use the price scale. Built with D3 v4, it uses `d3.csv` to load data, `d3.timeParse` for dates, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes `rect` elements for bodies and `line` elements for wicks.

深深度碎片
77% match
Loading thumbnail…

Candle Stick Chart d3 v4

This example renders a candle stick chart using D3 v4 and SVG, displaying product data with minimum, maximum, and average value ranges for each item. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, drawing semi-transparent filled rectangles to represent each product’s value span. Interactive tooltips appear on mouseover, showing details like product name and numeric values in lacks. The visualization includes a resize event handler that redraws the chart using jQuery and D3 selection methods.

CChandrakantThakkarDigiCorp
77% match
Loading thumbnail…

Custom Chart Layout

This example demonstrates a custom chart layout for displaying an interactive candlestick chart. It uses D3.js and the d3fc library, leveraging custom SVG elements and explicit measure and draw events to construct a responsive plot area with synchronized axes. The code creates a discontinuous time scale to skip weekends and renders a stock price series from a CSV file, allowing the chart to resize dynamically without reliance on the default chart component.

CColinEberhardt
76% match
Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

SSheela2930
75% match
Loading thumbnail…

Untitled

This example uses a dual-axis line chart to compare the daily closing and opening prices of a financial dataset from April to May 2012. The SVG rendering is built with React and D3 v4, using scales such as `d3.scaleTime` and `d3.scaleLinear` along with `d3.line` and `d3.axisLeft`/`d3.axisRight`. Two paths are drawn: one steelblue line for `close` and a red line for `open`, each with its own y-axis scale. Data is loaded from a CSV file via `d3.csv` and parsed with `d3.timeParse`.

Wwenjinazhang
75% match