Beginner Series, Part 1: Basic Chart Elements
Our team’s constant improvements and additions to ZingChart are great for users looking for the largest selection of features and options. Follow this tutorial series if you're interested in getting a substantial overview of using the ZingChart library.
If you’re looking for some specific features, try one of these:
-
Part 1: Basic Chart Elements (this tutorial)
Before starting this tutorial, you should start a “Hello ZingChart World” chart. Here are the detailed steps on how to do that via the Getting Started page. Once complete, you should have a basic chart like the one below:
Use Objects to Add Chart Elements
In ZingChart, object is the term for major chart elements. When you add an object to your chart JSON, you’re laying the groundwork for placing and styling common items in charts, such as titles, axes, and legends. Let’s start adding chart elements!
Title and Subtitle
Two of the most common chart elements are title and subtitle. To add an element to a chart in ZingChart, we need to create its empty object.
If you check the JavaScript tab, you'll see that we added the objects, but all we see is a blue bar on the chart. What’s happening here? Although these objects now exist in our JSON, we actually need to go one step further and set their text values.
Jump Ahead: If you’re the curious type and wondering what other attributes you can use to manipulate these objects, take a peek at their respective JSON attribute pages. Each object listed on the JSON Attributes Syntax page has a link to its own attribute page.
The objects covered in this tutorial can be found in the Graph Objects section.
We’ll cover styling title and subtitle later in our series. For now, let’s move on to axes.
X and Y Axes
In Cartesian charts, the X and Y axes will be displayed by default. However, in order to manipulate them, we need to add their objects to our JSON as well. They are called scaleX and scaleY.
{
type: "bar",
title:{
text: "Chart Title Text"
},
subtitle:{
text: "Chart Subtitle Text"
},
scaleX:{},
scaleY:{},
series : [
{ "values": [35, 42, 67, 89, 25, 34, 67, 85 ] },
{ "values": [28, 57, 43, 56, 78, 99, 67, 28 ] }
]
}
Let’s give our tutorial some context. Imagine that we’re charting revenue for a telecom company in a given year. If we want to show our data by quarter, we should change our scaleX values to reflect that. The scaleX and scaleY values attribute accepts both strings and numbers.
We can use an array of strings to display Q1-Q4 on our x-axis. We'll also update the title, subtitle, and series text while were making edits.
Let's also have our y-axis end at an even 100 instead of 90. This is easily accomplished by assigning the scaleY values attribute a "start:stop:step" string, as shown below.
If you check the JavaScript tab in the chart above, you'll see what we meant by "start:stop:step" string. With the string "0:100:10", we told our y-axis to start at 0, end at 100, and use increments of 10 in between.
To get more details on how to customize X and Y axes, we recommend reading the Scales page. It is also helpful to reference the scaleX and scaleY JSON attribute pages for a list of all available attributes.
Tooltip
Another common chart element is the tooltip. Like the x and y axes, a chart tooltip is enabled by default, but we must add the tooltip object to our top level chart object in order to style and manipulate it. For example, we’d like to add a callout arrow that points to each bar. Here’s how:
(Tool)Tip: You can disable most objects in ZingChart by setting their visible attribute to false or 0 - tooltips included.
Legend
Finally, let’s add a legend to our chart. Like other chart elements, this is as simple as adding the object to the top level of our chart JSON.
As you can see, this adds a legend is added to the top-right corner with the legend items stacked vertically. Need a different layout or placement for your chart?
No problem. Here is an example that moves the the legend to the bottom of the chart, centers it, and lines up the items horizontally instead:
Head over to the Legend features page and legend JSON attributes page if you'd like to go more in depth with legends.
Next Steps
This post should help you understand the basics of adding chart objects. Once you understand this aspect of working with ZingChart, you’re ready to move on to the basics of styling. Move on to the next tutorial to learn how to use colors, borders, and fonts.
Want some more in-depth ZingChart education? Visit our docs page! Have some more questions? Visit our help center!