Beginner Series, Part 2: Basic Chart Styling

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 1: Basic Chart Elements

• Part 2: Basic Chart Styling (this tutorial)

• Part 3: Axis Formatting and Dynamic Text

• Part 4: Markers, Labels, and Rules

• Part 5: Basic API Usage

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.

Basic Colors

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 backgroundColor attribute.

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:

Creating Gradients

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:

1. By using the six ZingChart gradient attributes to create a complex gradient. Those six attributes are:

• fillType

• fillAngle

• fillOffsetX

• fillOffsetY

• gradientColors

• gradientStops

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.

Complex Gradients

You do not have to use all six gradient attributes to create a complex gradient; however, you must use gradientColors and gradientStops.

The gradientColors attribute accepts two or more hexadecimal codes or ZingChart shortcodes.

gradientColors:"#79d1bc #b0c2e4 #e890ef"

The 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.)

gradientStops:"0.1 0.8"

These settings produce the following gradient:

The fill attributes fillType and fillAngle are optional. If you do not set them explicitly, they will default to “linear” and 90, respectively.

The attributes fillOffsetX and 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.

Setting Opacity

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 alpha attribute.

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 globals object.

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:

title:{  
    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.

Borders

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:

tooltip:{  
    callout:true,  
    borderColor:"#F4F2F2"  
}  

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.

Rounded Corners

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

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 false.

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:

• shadowAlpha

• shadowAngle

• shadowBlur

• shadowColor

• shadowDistance

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.

Next Steps

After completing the steps in this guide, you should have a firm grasp of how basic styling works in ZingChart. Once you understand this aspect of working with our JavaScript charting library, you will be prepared for styling more nuanced and complex elements.

How convenient: axis formatting, dynamic text, and other more complex styling options are precisely what will be covered in our next Beginners Guide.

Part 3: Axis Formatting and Dynamic Text

Want some more in-depth ZingChart education? Visit our docs page! Have some more questions? Visit our help center!