Configure Axis and Gridlines

The axes of a chart are essential for understanding the data values. After all, without a scale of reference, it would be not feasible to build a chart in the first place.

FusionCharts offers you many possible configurations to customize the axis and the gridlines:

Configure X-Axis/Y-Axis

The lines of the axes can at times be difficult to understand and affect the aesthetics of a chart. For these situations, FusionCharts offers the option to render the axes invisible. You can load a chart with the axes invisible and turn them on at the click of a button, if necessary.

FusionCharts offers you the option of hiding the X-axis and Y-axis. Note that this will only render the axis lines invisible. The reference values on the axes remain visible, which means viewers can still gauge values of data plots at a glance.

For instance, if you apply lighter shades to the data plots, then the black axes might stand out and divert the attention of viewers away from the plots. Turning the axes invisible is an excellent solution for the issue.

Axis Placement

You can configure the positions of both the X and Y axes depending on the chart data and the use case. This is useful when you feel that displaying the Y-axis on the right instead of the default left will make it easier for the viewers to focus on more important data. Also you can shift the X-axis to the top instead of bottom when you want to accommodate other components (like legend, scroll bar etc.) on the bottom of the chart.

Let us look at an illustration where we can configure the placement of both the axes in a multi-series column chart.

Also, look at the bar chart shown below and try to change the axes placements accordingly.

Secondary Axis

FusionCharts ships with several types of Dual Y-axis charts, which are equipped with a primary Y-axis and a secondary Y-axis. FusionCharts offers you the option to customize the secondary axis in a variety of ways, to make the chart look better. Customizing the axis may also make it easier for viewers to comprehend the chart data with fewer hassles.

Let us suppose you want to analyze youth subsidies provided in a country. You can plot the names of states on the X-axis, the population count of each state on one of the Y-axes, and the subsidies based on the income levels on the other. You can also swap the Y-axes if you want viewers to focus more on the subsidies than the population count of each state.

Axis Customization

FusionCharts lets you customize chart axes in multiple ways. You can modify the color and thickness, or even render one or more axes invisible to give your chart a sleek look.

FusionCharts offers you multiple options to modify the appearance of the axes of a chart. You can choose to render one or all axes of a chart invisible. You can also customize the color and thickness of the axes.

Divisional Lines (Grid Lines)

In line graphs you can customize the line in different ways, to make sure it becomes easier for users to read them. FusionCharts offers options for you to display the lines in different ways, such as to customize their colors, thickness, etc., or even make them dashed.

To know more about this feature, click here.

Plotting Grid Lines

If your data includes both actual and projected data values, FusionCharts provides you with the option to express them in two different ways. That way, the viewer can quickly differentiate between the actual and projected values.

For instance, if you plot the annual healthcare expenses of a country between the years 2005 - 2026, your data for the years 2019-2026 will only contain projections. You can plot the data values for 2005 - 2018 using a continuous line, and that for 2019 - 2026 using a dashed line. The viewer would then be able to identify real and projected values with one cursory glance.

To know more about this feature, click here.

Plotting Grid Bands

When you plot time-bound data in a continuous line chart, it can be difficult for users to quickly focus on the value between two consecutive data plots. This is even more pronounced in graphs that have a large number of data plots. You can remedy this by inserting a series of horizontal bands in the background. These will serve as extensions of the values on the Y-axis, helping the viewer identify trends in the data quickly.

Let us suppose you add horizontal bands in the background of a line graph representing the annual healthcare expenses of a country. If you plot percentage values plotted on the Y-axis, then users will be able to use the bands as a reference to quickly gauge the increase or decrease in the percentage of investment in public healthcare.

To know more about this feature, click here.

Vertical Lines

Adding vertical lines to the background of a line graph makes it easier for the viewer to easily observe the data between two consecutive values and comprehend them better. FusionCharts provides options for you to make the lines dashed, as well as customize colors, adjust thickness, etc.

Lines (Solid/Dashed)

FusionCharts lets you add vertical divisional (div) lines to the background of a line graph. This helps users quickly hover the pointer over the gap between two consecutive data plots, to see the value in a tooltip. You can set the number of div lines. You can customize their color, thickness, and transparency. You can even make them dashed and set the gap between two consecutive dashes.

For instance, if you plot the weekly traffic received by a website in a line graph, then you can insert vertical divisional lines behind the data plots so that there is one divisional line for every day of the week.

Band

Using FusionCharts, you can add vertical bands to the background of a line graph. This helps users quickly hover the pointer over the gap between two consecutive data plots, to see the value in a tooltip. You can customize the number of lines used to make up the bands. You can customize the colors of alternate bands and even their degrees of transparency (“0” being equal to transparent and “100” is equal to opaque).

For instance, if you plot the weekly traffic received by a website in a line graph, then you can insert vertical grid bands behind the data plots so that there is one band for every day of the week. That way, viewers will be able to easily hover over the bands to see the corresponding data values in tooltips.

To know more about this feature, click here.

Zero Plane

Zero plane is a plane separating the positive and negative numbers on the Y-axis of a chart. FusionCharts renders it by default in any chart that plots both positive and negative values. The zero plane applies to column, line, scatter, bubble and the area charts. Additionally, scatter and bubble charts also support vertical zero plane on the x-axis.

Zero plane in 2D charts

Let us suppose you want to plot the rate of yearly migration in a country over a period of ten years. In some of those years, the value may be negative, with more people leaving the country than the ones moving in. In others, it can be positive, or even zero (in relatively rare situations). Inserting a horizontal zero plane in the middle of the positive and negative values will help viewers understand the scenario of migration in the country.

To know more about this feature, click here.

Zero plane in 3D charts

You can modify the thickness, degree of transparency, and color of the zero plane. You can display a border around the zero plane and customize its color. You can also choose to show the number “0” at the beginning of the zero plane, so that viewers can easily understand where the zero plane starts.

For instance, consider the fact that you want to plot the rate of yearly migration in a country over a period of ten years, in a 3D column chart. In some of those years, the value might be negative, with more people leaving the country than the ones moving in. In others, it might be positive, or even zero (in relatively rare situations). Inserting a horizontal zero plane in the middle of the positive and negative values will help viewers better understand the scenario of migration in the country.

To know more about this feature, click here.

Dynamic Re-scaling of Axis

The dynamic re-scaling of axis comes in handy when you have to display two sets of data plots with two different reference scales of the same type in a chart, where one scale is much smaller than the other. In this scenario, the data set with the larger scale overshadows the one with the smaller scale, making it difficult for viewers to visualize the data easily. It allows you to instantly replace the larger scale with the smaller scale and deactivate the data plots of the larger scale, leaving behind only the plots of the smaller scale.

For instance, consider a scenario where you are comparing the yearly sales figures of two products, A and B. One of them (A) has sales figures in the hundreds, and the other (B) in millions. You can use millions (the larger scale) in the Y-axis and plot sales figures for both products in it. Note that the plots of A will look very small. Alternatively, you can use hundreds (the smaller scale) in the Y-axis and plot both sets of sales figures. This time, the plots of B will look huge.

However, you can use the re-scale the axes dynamically to instantly switch between the two products and the corresponding reference scales with one click.