The interactive counterpart to the design system's static SVG charts. These use the real libraries, themed on-brand with the TTD tokens. Rule of thumb: use the SVG charts in the design system for media (slides, PDF, PNG, social); use these for live charts inside an app where the user hovers, zooms and pans. Same brand, two engines.
Bar with data-labels
Chart.js + datalabels plugin · revenue by segment
Source: Chart.js (MIT) + chartjs-plugin-datalabels (MIT)
Line with data-labels
Chart.js · sessions over 12 months
Source: Chart.js (MIT) + datalabels
Doughnut with labels
Chart.js · channel share
Source: Chart.js (MIT) + datalabels
Stacked bar
Chart.js · channel mix by quarter
Source: Chart.js (MIT)
Candlestick · interactive (zoom + pan)
TradingView lightweight-charts · weekly bookings range. Scroll to zoom, drag to pan.
Source: lightweight-charts (Apache 2.0, attribution to TradingView)
Area · interactive
TradingView lightweight-charts · direct-booking share over time.
Source: lightweight-charts (Apache 2.0)