This is Part 4 of the ZingChart Beginner’s Guide, where we’ll learn about using scale markers to draw attention to data, how to harness the flexibility of shapes and labels to make custom buttons, and how to use ZingChart’s powerful rules and tokens to style your chart based on conditions that you declare.
This guide is part of an introductory series. If you’re looking for a different section, try one of the other installments:
-
Part 4: Markers, Labels, and Rules (this tutorial)
Drawing Attention to Your Data
Here at ZingChart, we know that drawing attention to data is an important part of effective dataviz. That's why we've included so many elements in the library to help you do just that. Let's start with scale markers.
Scale Markers
Not to be confused with plot markers, scale markers are a great way to draw your users’ attention to a certain node or area of your chart. There are two types of scale markers: line and area. Let’s add an area scale marker to tell the user that the sharp decline in cable revenue was a result of a reduced Netflix fee announced in Q3 (we wish!):
This draws attention to Q3, but doesn’t actually tell the user anything. Fortunately, scale markers also include their own label object so you can communicate what the marker is for.
Note that markers actually takes an array of marker objects, so you can add more than one marker to your chart if you like.
Conditional Styling with Rules
What if we built our chart at the end of Q3 and wanted to show projections for Q4? How might we visualize projected revenues? We would want to apply a different style to our chart, but only for Q4. This is an example of “conditional styling”.
ZingChart makes conditional styling easy with rules and tokens. We already know that tokens help us reference ZingChart specific values. Rules modify an object based on a condition we've defined using a combination of logical operators and ZingChart tokens.
A common way to display projections in a bar chart is by making the bar transparent and the border a dashed line. Since we're altering two plots - the plot for internet and the plot for cable - we'll need two rules.
The rules attribute expects an array of rule objects. Since the goal of these rules is to modify the plot, we'll place the rules array inside of the plot object.
plot:{
alpha:0.8,
borderRadius:"3px",
rules:[
{
//rule goes here
},
{
//rule goes here
},
]
}
The next step is to define the condition. This is where our tokens and logical operators come in.
plot:{
alpha:0.8,
borderRadius:"3px",
rules:[
{
rule:"%p === 0 && %i === 3", //the 4th node of the first plot
//style changes go here
},
{
rule:"%p === 1 && %i === 3", //the 4th node of the second plot
//style changes go here
},
]
}
The %p token represents plot index and the %i represents node index. ZingChart uses 0 based indices, which makes the first plot (Internet) 0 and the second plot (Cable) 1. Our nodes (bars) run from 0 (Q1) to 3 (Q4). Since we are targeting Q4 nodes specifically, we are only looking for a node index of 3 (the fourth nodes).
Now that we've targeted each node, we can specify styles in their respective rule objects.
Looking good! Let's take it one step further and modify the tooltips for the Q4 nodes as well. The thing to note here is that you can create rules inside of just about any object in ZingChart.
We want the tooltips for these nodes to be the same color, gray, so we are going to target them both with one rule by using the two original rules and an OR operator.
rule:"%p === 0 && %i === 3 || %p === 1 && %i === 3"
Though this is a great introduction to ZingChart rules, be sure to read the Rules page for more detailed information.
Labels
They might not see like much at first glance, but ZingChart labels are incredibly versatile, especially when used in conjunction with the API. What we want to do now is create a set of buttons that will allow us to modify the projected revenues of Q4. How are we going to do that with labels?
Using Labels to Make Buttons
The first step is to create a labels array at the top level of our chart JSON. This is the same level that objects like plot and legend are placed.
labels:[],
series:[
//omitted for brevity
]
Let's create four label objects, each with it's own text value.
We need to position these so they're not all on top of one another. Labels, like most objects in ZingChart, can be positioned absolutely with x and y attributes.
These don't really look like buttons though. We can fix that by manually setting the height and width of each label and applying some basic styling that we learned earlier in the series.
Let's label our buttons so the user knows what they're for. We can just add a few more label objects to the labels array and position them accordingly.
Why didn't we use shapes instead?
We very well could have made the same buttons using ZingChart shapes. However, since these were meant to be very simplistic buttons, it was easier to create them with labels.
If you want to make anything more complex, we definitely recommend using a shape instead. If you're interested in learning more about labels, check out the Labels article.
Next Steps
That's the end of Part 4! You should now know how to add scale markers and labels to your charts, as well as how to write styling rules. The next and final guide in this series will teach you the basics of using the ZingChart API. Head to Part 5 now to finish the series.
Want some more in-depth ZingChart education? Visit our docs page! Have some more questions? Visit our help center!