Skip to content

Geometry

In Vizzu you can set the geometric elements used to represent your data by the geometry property within the config object. This is where the library shines - beautifully animating between the geometries!

Switching the geometry to area.

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.16/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.16/assets/data/music_data.js'

let chart = new Vizzu('myVizzu')

await chart.initializing

chart.animate({
    data
})
chart.animate({
    config: {
        channels: {
            y: {
                set: ['Popularity']
            },
            x: {
                set: ['Genres']
            }
        }
    }
})

chart.animate({
    config: {
        geometry: 'area'
    }
})

Drawing a line chart.

chart.animate({
    config: {
        geometry: 'line'
    }
})

Switching the geometry to circle. This setting is the most useful when used together with the size channel, as shown in the next chapter of the tutorial.

chart.animate({
    config: {
        geometry: 'circle'
    }
})

Rectangle geometry is the default setting in Vizzu, used for most common charts like bar and column charts.

chart.animate({
    config: {
        geometry: 'rectangle'
    }
})