11## Chart presets
22
3- In this tutorial, we have shown how you can create charts with Vizzu
4- using a chart type-agnostic, uniform way, without being limited to a predefined
5- set of available charts. But sometimes, we know exactly the chart type we
6- would like to use, and it is easier to start with that, skipping all the
7- necessary configurations to build it from scratch. For this reason, Vizzu
8- provides preset configurations for many known chart types
9- (for all available presets, see the [ preset galery] ( #chart-presets ) ).
3+ Throughout this tutorial, we have shown you how to create charts with Vizzu
4+ using a chart type-agnostic, uniform way without being limited to a predefined
5+ set of available charts. But sometimes, when you know the chart type you
6+ want to use, it is easier to start with that and skip configuring it from scratch. For this reason, Vizzu
7+ provides preset chart configurations for many known chart types.
8+ See the [ preset galery] ( #chart-presets ) for all available presets.
109
11- Presets are available through methods of the 'presets' static property of the Vizzu class.
12- These methods are returning chart configuration objects which can be passed to
13- the 'animate' method. Let's create a Stacked Bubble chart.
10+ Use the methods of the 'presets' static property of the Vizzu class to build a chart based on a preset .
11+ These methods return chart configuration objects that can be passed to
12+ the 'animate' method. For example, this is how to create a stacked bubble chart using its preset .
1413
1514``` javascript { "title": "Using a preset" }
1615chart .animate (Vizzu .presets .stackedBubble ({
@@ -20,24 +19,25 @@ chart.animate(Vizzu.presets.stackedBubble({
2019}));
2120```
2221
23- Presets will override all the channels, so previously set series will be
24- removed from the chart. They will also explicitly set most of the chart
25- configuration parameters since these will effectively result in the selected
26- chart type. Exceptions are the 'legend', 'title', 'reverse', and 'sort' properties
27- which can be set along with the preset. Let's sort the next preset chart by values.
22+ Presets will override all channels, removing all previously set series
23+ from the chart. Using a preset will also explicitly set most chart
24+ configuration parameters. Exceptions to this are the 'legend', 'title', 'reverse', and 'sort' properties
25+ that can be set while using a preset. Here's an example of a preset where chart elements are sorted by value.
2826
29- ``` javascript { "title": "Setting sorting for a preset" }
27+ ``` javascript { "title": "Set sorting for a chart preset" }
3028chart .animate (Vizzu .presets .radialStackedBar ({
3129 angle: ' Popularity' ,
3230 radius: ' Genres' ,
3331 stackedBy: ' Kinds' ,
3432 sort: ' byValue'
3533}));
3634```
35+ As you will see, the preset doesn't override the previously configured sorting
36+ and wouldn't affect the rest of the chart config parameters mentioned above either.
3737
38- Presets will affect only the chart configuration. If you need to set the styles
39- or the underlying data, you can use the more verbose syntax below, explicitly
40- pass the preset to the 'config' property of the animate method's parameter.
38+ Presets will affect chart configuration, but you might also want to set the style
39+ or the underlying data. In this case , you can use the more verbose syntax below, explicitly
40+ passing the preset to the 'config' property of the animate method's parameter.
4141
4242``` javascript { "title": "Setting style for a preset" }
4343chart .animate ({
@@ -49,8 +49,4 @@ chart.animate({
4949 ' plot.xAxis.interlacing.color' : ' #ffffff00'
5050 }
5151});
52- ```
53-
54- As you can see, the preset won't override the previously configured sorting,
55- and it won't affect the rest of the chart config parameters mentioned above,
56- which can be set along with the preset.
52+ ```
0 commit comments