Sorting
Vizzu
provides multiple options to sort data. By default, the data is sorted
by the order it is added to Vizzu
. This is why we suggest to add temporal data
such as dates in chronological order - from oldest to newest.
You can also sort the elements by value, which will provide you with an ascending order.
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.14/dist/vizzu.min.js'
import data from 'https://lib.vizzuhq.com/0.14/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: {
sort: 'byValue'
}
})
If you want descending order instead, you have to set the reverse
parameter to
true
. When used without setting the sorting to byValue
, the elements will be
in the opposite order than they are in the data set added to Vizzu
.
chart.animate({
config: {
reverse: true
}
})
This is how to switch back to the default sorting.
chart.animate({
config: {
sort: 'none',
reverse: false
}
})
When you have more than one dimension on a channel, their order determines how
the elements are grouped. For example, below - each set of bars is first
organized by Genres
, and then we have one bar for each of Kinds
.
chart.animate({
config: {
channels: {
y: {
detach: ['Kinds']
},
x: {
set: ['Genres', 'Kinds']
}
}
}
})
When switching the order of dimensions on the x-axis Vizzu
will rearrange the
elements according to this new logic.
Note
The legend is automatically removed during the animation.
chart.animate({
config: {
channels: {
x: {
set: ['Kinds', 'Genres']
},
}
}
})