Mixed chart
Compare totals and benchmarks in one plot.
Usage
Compose Bar, Line, and Area in the same Plot. All marks use the same numeric axis, so their values must use compatible units.
Lines do not reserve bar slots or contribute to stacked bar totals. Keep target series in config so legends and tooltips can name them.
Totals and target
Replay preview Full screen Code
Revenue Target
| month | Revenue | Target |
|---|---|---|
| Jan | 186 | 160 |
| Feb | 242 | 190 |
| Mar | 218 | 220 |
| Apr | 304 | 250 |
| May | 286 | 280 |
| Jun | 372 | 310 |
Continuous motion
Replay preview Full screen Code
Revenue Target
| month | Revenue | Target |
|---|---|---|
| Jan | 186 | 160 |
| Feb | 242 | 190 |
| Mar | 218 | 220 |
| Apr | 304 | 250 |
| May | 286 | 280 |
| Jun | 372 | 310 |
Custom legend and tooltip
Replay preview Full screen Code
Target
API requests
| day | Target | API requests |
|---|---|---|
| Mon | 500 | 420 requests |
| Tue | 600 | 670 requests |
| Wed | 650 | 590 requests |
| Thu | 750 | 810 requests |
| Fri | 800 | 940 requests |
Data and animation states
Full screen Code
Orders Target
| month | Orders | Target |
|---|---|---|
| April | 48 | 60 |
| May | 72 | 65 |
| June | 61 | 70 |
API reference
See the shared API reference for every part and prop.