Stacked Stream
Info - How to setup Vizzu
In HTML
, create a placeholder element that will contain the rendered
chart.
<html> <body> <div id="myVizzu"> </div> </body> </html>
In JavaScript
, initialize and configure the chart:
import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@0.9/dist/vizzu.min.js' import { data } from 'https://lib.vizzuhq.com/0.9/assets/data/music_industry_history_1.js' let chart = new Vizzu('myVizzu') chart.initializing chart.animate({ data })
This is a 2-step animation:
1st: set the Split parameter to true
2nd:
- move the Measure to the X-axis
- set the Align parameter 'center'
- set the Split parameter to false
- arrange the markers in reverse order
- switch the Geometry from Area to Rectangle
chart.on('plot-axis-label-draw', (event) => { const year = parseFloat(event.detail.text) if (!event.detail.text.includes('$') && !isNaN(year) && year % 5 !== 0) event.preventDefault() }); chart.animate({ config: { "channels": { "x": "Year", "y": [ "Revenue", "Format" ], "color": "Format" }, "geometry": "area", "align": "center" }, style: { "plot": { "yAxis": { "label": { "numberScale": "K, M, B, T" } } } } }); chart.animate({ config: { "split": true } }); chart.animate({ config: { "channels": { "y": [ "Revenue", "Year" ], "x": [ "Format" ] }, "geometry": "rectangle", "align": "min", "split": false, "sort": "byValue", "reverse": true } }); chart.feature('tooltip', true);