Multi-Series Line Chart With Two Y-axis
This example shows a multi-series line chart comparing daily sales for two products, Product A and Product B, over a period in September 2017. The chart uses two y-axes to accommodate the different scales of the two series, with the left axis for Product A sales and the right axis for Product B sales. The data is loaded from an embedded JavaScript array and bound to SVG paths, with D3 v4 handling the scales, axes, and line generation. A tooltip provides on-hover details about the batch ID, product name, and sales values. The visualization is rendered with SVG and includes a resize listener to adapt the chart dimensions to the window. The color scheme distinguishes the two series (red for Product A, green for Product B), and the chart is designed to be responsive within its container.This multi-series line chart compares daily sales for two products using dual y-axes to handle their different scales. Product A sales (red line) are plotted against the left axis, while Product B sales (green line) use the right axis. The x-axis displays dates over a three-week period in September 2017. Built with D3 v4 and rendered as SVG, the chart includes a legend, axis labels, and an interactive tooltip that appears on hover to display the batch ID and sales values. The visualization also supports window resizing, and its clean, dual-axis design makes it easy to compare the trends of the two product lines despite their differing magnitudes.