Skip to content

Shorthands & Store

To assist you with the development we added various shorthands that will make your code more compact.

We also added store functions, which enable you to save either a chart state or a whole animation into a variable that you can reuse later instead of setting up that state or animation once again.

If you don't use the data and style properties in the first parameter of the animate method, you can simplify your code by using only the object of the config property.

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_data.js'

let chart = new Vizzu('myVizzu')

await chart.initializing

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

chart.animate({
    // config: {
    align: 'stretch'
    // }
})

Let's save this state by calling the store function.

var snapshot;

snapshot = chart.store();

If you set/attach/detach just one series on a channel, you don't have to put that series into an array. Also, let's save this animation by calling the store method of the animation control object.

var animation;

chart.animate({
    channels: {
        // x: { attach: [ 'Kinds' ] },
        x: {
            attach: 'Kinds'
        },
        // y: { detach: [ 'Kinds' ] },
        y: {
            detach: 'Kinds'
        }
    },
    align: 'none'
}).activated.then(control => {
    animation = control.store();
});

If you use set on a channel and no other options like range, you don't have to express that channel as an object. If you only set one series on a channel you can simply write the series' name after the channel name.

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

In any case, you can simply omit the channel object, Vizzu will automatically recognize the channels by their names.

chart.animate({
    // channels: {
    y: 'Kinds',
    x: ['Genres', 'Popularity']
    // }
})

If you have multiple keyframes, but with no animation options, you can omit the keyframe object.

chart.animate([{
    // target: {
    y: ['Genres', 'Popularity']
    x: 'Kinds',
    // }
}, {
    // target: {
    y: 'Kinds',
    x: ['Genres', 'Popularity']
    // }
}])

Instead of creating nested objects, you can set the styles like this.

chart.animate({
    style: {
        // plot: { xAxis: { label: { fontSize: '150%' } } }
        'plot.xAxis.label.fontSize': '150%',
        'title.backgroundColor': '#A0A0A0'
    }
})

Shorthands feature can be switched off if not needed:

chart.feature('shorthands', false)

This is how you can reuse a previously stored animation.

chart.animate(animation)

You can also get back to a state that you previously stored.

chart.animate(snapshot)