Column to Waterfall
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.7/dist/vizzu.min.js' |
| import { |
| data |
| } from 'https://lib.vizzuhq.com/0.7/assets/data/chart_types_eu.js' |
| |
| let chart = new Vizzu('myVizzu') |
| |
| chart.initializing |
| |
| chart.animate({ |
| data |
| }) |
- add the existing Dimension to the Y-axis as well
- + here is an example of how you can set a colorGradient palette in the Style
| chart.animate({ |
| config: { |
| "channels": { |
| "x": "Year", |
| "y": "Value 5 (+/-)", |
| "color": { |
| "set": "Value 5 (+/-)", |
| "range": { |
| "min": "-45", |
| "max": "45" |
| } |
| }, |
| "noop": "Country", |
| "label": "Value 5 (+/-)" |
| }, |
| "legend": "color" |
| }, |
| style: { |
| "plot": { |
| "marker": { |
| "colorGradient": "#ac1727 0,#e36c56 0.15,#f4b096 0.35,#d5d7d9 0.5,#9fbffa 0.65,#6389ec 0.85,#3d51b8 1", |
| "label": { |
| "position": "top" |
| } |
| } |
| } |
| } |
| }); |
| |
| chart.animate({ |
| config: { |
| "channels": { |
| "y": [ |
| "Year", |
| "Value 5 (+/-)" |
| ] |
| } |
| } |
| }); |