UPDATE:
Our team’s constant improvements and additions to ZingChart are great for users looking for the largest selection of features and options. But sometimes it means our “how-to” blog posts could use a little updating.
In order to make our older and highly viewed how-to posts more helpful, we are updating the Beginner’s Guide series. Updates include the most recent version of the syntax, which makes it even easier to use the cool styling capabilities of ZingChart. Follow the new tutorial series if you're interested in getting a substantial overview of using the ZingChart library.
Welcome Back ZingCharters,
In this tutorial we are going to cover a variety of ways to handle x-axis labels. We will cover some of the more common questions we receive about the x-axis and different ways to style the labels on your charts.
X-Axis
One of the most common questions we receive is related to x-axis labels that are too long to fit in the designated space. ZingChart will typically remove the labels that do not fit.
{
"type":"bar",
"title":{
"text":"ZingChart Bar"
},
"subtitle":{
"text":"Default Style"
},
"scale-x":{
"values":["January","February","March","April","May",
"June","July","August","September",
"October","November","December"],
},
"plot":{
},
"scale-y":{
},
"series":[
{
"values":[11,26,7,44,11,28,42,26,13,8,6,15]
},
{
"values":[8,31,12,40,24,20,16,40,9,12,5,20]
}
]
}
Font-Size
There are a few different ways to ensure all of the x-axis labels are visible and easy to read.
Your first option would be to possibly just make the font of the labels smaller. In some circumstances this works fine.
If you want to adjust the size of the font (or any other characteristic such as font-color, font-weight, etc) you need to add the "item":{ }, object to the "scale-x":{ }, object. Making changes within "item":{ }, will affect the x-axis labels.
{
"type":"bar",
"title":{
"text":"ZingChart Bar"
},
"subtitle":{
"text":"Default Style"
},
"scale-x":{
"values":["January","February","March","April","May",
"June","July","August","September",
"October","November","December"],
"item":{
"font-size":"8px"
}
},
"plot":{
},
"scale-y":{
},
"series":[
{
"values":[11,26,7,44,11,28,42,26,13,8,6,15]
},
{
"values":[8,31,12,40,24,20,16,40,9,12,5,20]
}
]
}
Font Angle
In this case, our labels do fit as a smaller font, but it is arguable if the labels are legible. Another option that is available would be to turn the labels on an angle. This will also be done in the "scale-x":{"item":{ } }, objects.
First you can add the "font-angle" attribute. This attribute will accept both positive and negative numbers depending on how you and the text to appear.
{
"type":"bar",
"title":{
"text":"ZingChart Bar"
},
"subtitle":{
"text":"Default Style"
},
"scale-x":{
"values":["January","February","March","April","May",
"June","July","August","September",
"October","November","December"],
"item":{
"font-angle":90
}
},
"plot":{
},
"scale-y":{
},
"series":[
{
"values":[11,26,7,44,11,28,42,26,13,8,6,15]
},
{
"values":[8,31,12,40,24,20,16,40,9,12,5,20]
}
]
}
Here is an example but with the "font-angle" set to -90 instead of 90.
It is very common for people to want to put the label on an angle like this:
"scale-x":{
"values":["January","February","March","April","May",
"June","July","August","September",
"October","November","December"],
"item":{
"font-angle":-45,
}
},
Max Characters
If you do not want to angle your labels and can not make the font small enough to fit and be legible you could limit the number of characters that show for each label.
"scale-x":{
"values":["January","February","March","April","May","June","July","August","September","October","November","December"],
"item":{
"max-chars":4
}
},
The "max-chars": attribute will allow you to select the number of maximum characters. It will use no more than that number of characters followed by … anywhere a label was shortened.
There will also be some circumstances where breaking the labels into 2 lines can be helpful. Here we have added the year to some new labels.
We can use some of the new things we learned earlier and make all of the labels fit and easy to read.
{
"type":"bar",
"title":{
"text":"ZingChart Bar"
},
"subtitle":{
"text":"Default Style"
},
"scale-x":{
"values":["Quarter 1<br>2012","Quarter 2<br>2012","Quarter 3<br>2012",
"Quarter 4<br> 2012","Quarter 1<br>2013","Quarter 2<br>2013",
"Quarter 3<br>2013","Quarter 4<br>2013"],
"items-overlap":true,
"item":{
"font-angle":-45,
}
},
"plot":{
},
"scale-y":{
},
"series":[
{
"values":[11,26,7,44,11,28,42,26]
},
{
"values":[8,31,12,40,24,20,16,40]
}
]
}
Labels
You will notice the main deference here is we added a <br> directly in the labels as they are listed in the "values":[ ], attribute. This allows us to show the label on 2 lines.
You might notice that the labels do not line up exactly as you may want them to. We need to slide the labels a little to the right. This can be done by adding the "offset-x": attribute within the "scale-x":{ "item":{ } }, object.
"scale-x":{
"values":["Quarter 1<br>2012","Quarter 2<br>2012","Quarter 3<br>2012",
"Quarter 4<br> 2012","Quarter 1<br>2013","Quarter 2<br>2013",
"Quarter 3<br>2013","Quarter 4<br>2013"],
"items-overlap":true,
"item":{
"font-angle":-45,
"offset-x":"7px"
}
},
Hopefully, this tutorial provided you with some solutions for styling your x-axis labels. ZingChart provides an almost infinite level of customization for its charts. We will continue to show you how to customize your charts in the weeks to come. If you have any requests for tutorials that relate to specific needs please do not hesitate to ask.
Happy Charting,
ZingChart Team