This is the second tutorial in our updated ZingChart Beginner’s Guide. We’re going to be using the chart that we built in the ZingChart Getting Started guide and modified in the previous post of this series, Basic Chart Elements.
In this guide, we’ll be covering the basics of customizing the style of your charts with colors, custom fonts, and more.
Were you looking for a different part of the series? Try one of these:
Part 2: Basic Chart Styling (this tutorial)
Let’s get started with styling.
Chart Styling Basics
At ZingChart, when we talk about styling, we are often referring to changing the colors, gradients, and opacity of chart elements.
If you are following along with the tutorial series, your chart should look something like this:
A common way many users style their charts is by changing the background color. In our example, let’s start by changing the background color to light gray.
It's really hard to see our title. That's an easy fix, we just need to update the color of our title text. Also, what if we want the area where data is plotted to be a different color? That area is its own object, called the
plotarea. It has its own
The plot area can be styled independently from the rest of the chart. The following example shows how to change the
plotarea background color and how to change the font color of our title and subtitle.
Remember - if it’s an element of the chart, it has a color that you can change!
Tip: ZingChart color attributes accept both RGB and hexadecimal values. You can also use shortcodes as well. You can assign any attribute that accepts a color value one of the values below (enclosed in quotes) instead:
Sometimes styling charts to match your company’s branding or a designer’s comp requires using more than just flat colors. There are two ways to enhance your chart style with gradients:
- By using the six ZingChart gradient attributes to create a complex gradient. Those six attributes are:
Tip: If you’re wholly unfamiliar with gradients, the Mozilla Developer Network features a good educational article. However, CSS gradients are a bit different from ZingChart gradients.
You do not have to use all six gradient attributes to create a complex gradient; however, you must use
gradientColors attribute accepts two or more hexadecimal codes or ZingChart shortcodes.
gradientColors:"#79d1bc #b0c2e4 #e890ef"
gradientStops attribute accepts percentages, but in contrast to CSS, percentages must be given in their decimal form. (Please refer to the aforementioned Mozilla article if you are unfamiliar with the concept of gradient stops.)
These settings produce the following gradient:
The fill attributes
fillAngle are optional. If you do not set them explicitly, they will default to “
linear” and 90, respectively.
fillOffsetY accept integers and give you an even finer degree of control over gradient fill.
We’re not going to use a complex gradient in our chart today, but here are some excellent examples of just how creative you can get with gradients in ZingChart.
Opacity is defined as the level of an object’s transparency. You can alter opacity as a stylistic choice or simply to reveal overlapped elements. In ZingChart, opacity is altered via the
This attribute accepts any value between 0 and 1, 1 being the default and translating to a fully opaque object. Let’s reduce the opacity on our entire plot by just a smidge:
Using Fonts in ZingChart
If you want to use a custom font in your chart, there are multiple ways to do so. Do you want it to be applied to all text?
If so, your best bet would be to include it in a theme. If a custom font is one of only a handful of blanket changes, you could instead set it in the
Check the HTML tab of the chart above. Did you notice that we still need to include that font in our HTML as we would any other font?
If you want your font to apply only to a specific element, simply set fontFamily inside of that element’s object, like so:
fontFamily:'Your Font Name'
Borders, Rounded Corners, and Shadows
ZingChart can do much more than just change colors. Common CSS styles like borders, rounded corners, and shadows can be achieved in ZingChart, often with the same or very similar attributes.
In ZingChart, if an object can be thought of as a shape, then it’s likely to have border attributes. If we wanted to change the border color of our tooltips, for example, we could do it like this:
It’s worth noting that not all objects in ZingChart are instantiated with a border. If we were to put the example code above into our chart and reload it, we wouldn't see a change in our tooltips’ appearance at all. Why is that? Because tooltips don’t have a border by default.
If you notice that setting
borderColor doesn’t have an affect on the appearance of the object you are trying to customize, you most likely need to set the object's
borderWidth attribute to anything greater than 0.
As always, check the appropriate JSON attributes page for the object in question if you’re not sure if you can apply a border to it.
Like CSS, ZingChart provides the
borderRadius attribute to create rounded corners. Let’s apply it to our plot (the bars in our chart), and also to our legend and tooltips to maintain a consistent style.
Shadows are often used to set objects apart by creating the appearance of depth. Some objects in ZingChart, like tooltips and legends, are given shadows by default. We prefer a more flat design and would actually like to remove the shadows from both of these objects. We can do this by setting
shadow attribute in each object to
If you do want to add a shadow to an object, don't worry! ZingChart gives you granular control over shadows with the following attributes:
Using What We've Learned
Before we move on, we'd like to remove the border from our legend and legend markers. Now that we know about
borderWidth, let's do this by setting the
borderWidth attribute of each object to 0.
Did you notice that we had to add the
marker object to the
legend object in order to remove its border? The act of adding an object to manipulate it - even though you might already see it rendered in your chart - should be something you are getting more comfortable with.
The legend looks a little odd with a background and no border. This is a good time to use the color shortcode for transparency, "none".
We'll apply it to the legend's
backgroundColor attribute. Let's also apply a
borderRadius to our markers to match the plot.
How convenient: axis formatting, dynamic text, and other more complex styling options are precisely what will be covered in our next Beginners Guide.