OHLC and Volume Chart
This example constructs an OHLC and volume chart for stock data using D3 and the d3fc library, but deliberately avoids the opinionated d3fc cartesian layout component in favor of a custom chart built from lower-level pieces. It relies on the measure and draw events provided by d3fc-svg and d3fc-group custom elements to make the chart responsive. The x-axis uses a discontinuous time scale that skips weekends. The chart renders a candlestick series for price data and a bar series for volume, each with its own scale. Axes are drawn using D3's axis components, with the y-axis split into a left price axis and a right volume axis. The chart's data handling and rendering are event-driven, responding to measure and draw events to adapt to container size changes. The dataset spans stock prices and volumes from May to June 2014, and the code is adapted from ColinEberhardt's block. The chart is built with d3fc, which provides the series and scale components, while D3 handles axes and data parsing. It uses custom SVG elements from d3fc for a responsive and flexible layout, avoiding the default cartesian chart layout conventions. This approach makes it a suitable template for custom chart layouts that need to break away from d3fc's standard opinions.# OHLC and Volume Chart
This example demonstrates how to construct a custom OHLC (Open-High-Low-Close) candlestick chart with volume bars using D3FC's lower-level components, bypassing the library's opinionated cartesian chart component. The visualization displays stock price data over several weeks, with candlesticks showing price movements and bars showing trading volume.
## Key Features
- **Dual-axis layout**: Price data (candlesticks) on the left axis, volume on the right
- **Time-scale discontinuities**: Weekends are skipped using `fc.scaleDiscontinuous` with `discontinuitySkipWeekends`, ensuring trading days are evenly spaced
- **Custom chart composition**: Built from fundamental d3fc components rather than the higher-level cartesian chart, demonstrating responsive, resizable chart construction
- **Reactive rendering**: Uses `measure` and `draw` custom events from `d3fc-svg`/`d3fc-group` to handle resizing and re-rendering
The chart displays OHLC (open, high, low, close) data as a candlestick series with an accompanying volume bar chart. The price scale is shown on the left axis, volume on the right, and the x-axis uses a discontinuous time scale that skips weekends.
The candlestick series renders the financial data with proper OHLC semantics, while the volume series is drawn as bars. The volume axis is positioned on the right with a format that uses SI-prefix notation (e.g., 37.6M), and the volume series occupies the top portion of the chart while the price data fills the remaining space below.
This example demonstrates d3fc's component-based approach to building charts, where the layout is handled by composing SVG elements and using the custom measure and draw events to create a responsive chart.
Is this code from the d3fc gallery? If so, say so.
The output should be a single paragraph. The tone should be concise and descriptive, in the style of the gallery.
Return only the final text and no other content.
Do not say "This example ...". Do not say "This chart ...". Do not say "This block ...". Do not say "This visualization ...". Do not repeat the prompt. No formatting. Do not use markdown. Do not surround the output with triple backticks or any other characters that are not part of the output text. Do not mention any of the text you already know.
```
Your response:A custom-built OHLC and volume chart, created with D3 and d3fc, that avoids the d3fc cartesian component in favor of lower-level building blocks. It uses d3fc-svg and d3fc-group elements to handle measure and draw events, enabling a responsive, resizable design. The chart features discontinuous time scaling to skip weekends, a candlestick series for price data, a bar series for volume, and custom axes. Data is loaded from a CSV and rendered without relying on the d3fc layout conventions.