Specify Chart Titles/Labels

Any form of text appearing on the chart canvas area adds more details to the data visualization. Text can be in the form of chart captions, subcaptions, axis titles, data values, and data labels.

For quick reference on all the customizations, refer to the following list:

Captions and Subcaptions

A well-written caption makes a chart much easier to comprehend. For example - “Countries With Most Oil Reserves [2017-2018]” clearly depicts the data that is shown on the chart. The subcaption of the chart states the unit in which the measurements of oil reserves is shown.

FusionCharts provides plenty of options to set captions and subcaptions, with smart space management.

To know more about this feature, click here.

Caption Alignment

Using FusionCharts, you can choose to display the chart caption on the left or the right hand side of the chart canvas. This can come in handy for improving aesthetics of a chart.

Let us suppose you are building a chart with data about oil reserves in different countries across the globe. Once you render the chart, you might see that the number of high value plots is concentrated on the left side of the chart. You can align the caption to the right side of the chart, so that it looks cleaner. You can provide two buttons below the chart; one to align the caption to the left, and the other to align it to the right. That way, the viewers can quickly alter the alignment after the chart is rendered.

To know more about this feature, click here.

Axis Titles

The X and Y axes are among the essential elements of any chart. It is very important to properly name the axes in order to distinctly state the data which is plotted on each axis. In this example, we have displayed countries on the x-axis and the quantity of oil reserves on the y-axis.

FusionCharts provides attributes to customize axis titles, including font, font size, color, transparency, and border properties. The following sample illustrates possible customizations of axis titles.

To know more about this feature, click here.

Labels

Labels are integral to any chart. They showcase the relationship between the axes and the data plots. Labels are displayed along the x-axis of the chart. In this example, the x-axis labels are the name of the countries for which the oil reserves are shown.

FusionCharts supports smart label management, which ensures that labels avoid overlapping and are displayed clearly, no matter how long or short they are.

The smart label management options are:

  • Auto mode - The default “auto” mode automatically adjusts a particular data label and prevents overlapping of the labels. FusionCharts supports {br} tags within the label text, to put breakpoints at specific positions.
  • Pure Rotation - In case you are using long data labels, you can rotate them to prevent label texts from getting truncated, with ellipses at the end.
  • Rotate & Slant - If the visibility of label texts is not clear even after rotating the labels, you can slant them.
  • Stagger - Use this mode to distribute data labels on multiple levels (default is 2), to increase the inter-label space available on each level.

To know more about the various modes, click here.

Data Values

The values, based on which the data plots are drawn, are known as data values. If you use text labels to display the data values, you can customize several properties of the data values, like font, font size, color, transparency, and border styles. To know more about the attributes, click here.

Using Custom Strings

Let’s imagine a situation, where you need to highlight one particular data plot using additional text. FusionCharts allows you to use custom text as strings in place of data values. For example - In this sample, Q4 has generated the highest revenue. So it is marked as “Year’s Best” using string instead of the value.

To know more about this feature, click here.

Direction of Values

In case you are using long data values, you can rotate the data values vertically for better visibility.

Value Placement Mode

You can display data values either inside or outside the data plots, for a better look and feel, as per your preference.

Overlapping Values

Let’s take an example where you are trying to show two line plots with values very close to each other, resulting in overlapping of the data values. The chart will look like the first example given below (named Chart with overlapping values). FusionCharts allows you to overcome such situations by setting the position of each value for clear visibility. Check the difference in the same example after placing the data values properly in the second example given below (named Chart without overlapping values). Instantly, the chart is easier to read and understand.

Chart with overlapping values

Chart without overlapping values

To know more about this feature, click here.

Smart Label

For specific charts like pie/doughnut, FusionCharts allows you to add smart labels and smart lines to specific charts like pie/doughnut. These are data connector lines that connect the pie/doughnut slices to their respective labels, avoiding overlapping. These labels and lines can be configured using a list of supported attributes.

To know more about this feature, click here.

Center Label

For doughnut charts, you can display text in a label placed at the center, to summarize what the chart is showing. You can also set the label to update when the mouse pointer is hovered over any doughnut slice, showing the actual value of that particular slice.

Let us suppose you are plotting the distribution of different versions of Android operating system among users in 2017, in a doughnut chart. You can display the chart title on a smart label placed at the center. Now, all you need to do is configure this label to display the data value for a section when you hover the mouse pointer over it.

To know more about this feature, click here.

Label Placement (Pie/Doughnut Charts)

For pie and doughnut charts, you can display the data labels both inside or outside the chart. These labels show the category and the value of the particular slice. Also the readability can be improved by giving the label, a text outline as shown in the chart below.

Let us suppose you are plotting the market share of different web servers, in a pie chart. You can display the labels along with their percentage values either inside the chart or outside. Also, you can notice a text outline on the labels when they are inside the chart for better readability.

Readability

For the better readability of the data labels, data values of the charts, you can include the text outline for the labels as per the requirement. Let us have a look at a stacked bar chart which shows the top finishers of the 2016-17 season with the respective values displayed on the data plots as well.

Inline HTML Tags

Text labels can be customized using direct inline HTML tags in your code. For example, you can use strikethrough, italic, hyperlink, custom abbreviations, del tags or any other html tag to display customized text.

The example below shows the column “Coffee” with a abbreviated label “Coffee Crisp”, and a strikethrough of the x-axis label "100Grand".

Auto Scaling

Text labels can be auto-scaled for relative text sizes i.e . rem, em, %, vw. For example, you can set different font sizes for each label specifying the relative length unit.

The example below demonstrates usage of relative text sizes in charts.