[Demo] Add `surplus deficit filled line` to Vizro Visual Vocabulary

[huong-li-nguyen]

We're looking for a contributor to add the named chart to our Vizro Visual Vocabulary demo dashboard.

👉 Live demo: https://vizro-demo-visual-vocabulary.hf.space/
👉 Source code: https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/visual-vocabulary

On the first page of the dashboard, you'll see some blurred charts — these are chart types that haven’t been implemented yet. This issue is about adding one of them.

🎯 What You’ll Do

• Add a working Plotly example of the chart
• Create the corresponding chart page
• Add a short explanation (e.g. what the chart is, when to use this chart)
• Integrate it into the dashboard

You can follow this existing commit as an example of what files need to be changed or follow any of the existing chart examples: commit

🧭 How to Get Started

1. Please review the contribution guidelines before starting: https://vizro.readthedocs.io/en/latest/pages/explanation/contributing/

2. Read through the README of the visual vocabulary

3. Fork the repository

4. Create a branch:

demo/<short-description>

Example:

demo/add-arc-chart

4. Run the demo locally from vizro-core:

hatch run example visual-vocabulary

The app will auto-refresh as you make changes.

✅ Before Submitting

• Ensure the app runs without errors
• Confirm your chart appears correctly
• Follow the structure of existing chart implementations
• List any resources you used in the README

Then open a Pull Request 🚀

Thanks for contributing to Vizro and helping expand the Visual Vocabulary! 🎨📊