Blog

Anatomy of a Chart

While every element of charts produced by NetCharts can be customized and controlled, with countless combinations allowing you to build a chart exactly the way you want, the chart itself consists of many parts that are shared and used across the different chart types. The stacked bar chart represents a rectangular chart and shares many […]

Author:
Date:
May 15, 2015
Category:
Design Approaches, NetCharts Designer, NetCharts Performance Dashboards, NetCharts Pro, NetCharts Server

While every element of charts produced by NetCharts can be customized and controlled, with countless combinations allowing you to build a chart exactly the way you want, the chart itself consists of many parts that are shared and used across the different chart types. The stacked bar chart represents a rectangular chart and shares many features with other rectangular charts like line charts, combo (bar and line), x-y/quadrant charts, etc. Other chart types like pie charts, dial charts, etc. also share some features but have components unique to their design.

Lets review the anatomy of a chart in a bit more detail by using a stacked bar chart as an example. To assist identifying the different parts that make up a chart, the chart example below includes gray labels with blue text pointing at each item. Below the chart image you’ll find a description of what each part does.

AnatomyOfAChart_bar

Note that the axis labels and axis tics, can appear on the top, bottom, left, or right sides of a chart (though we have omitted them at the top axis for the sake of clarity in the figure above) and they may also be combined. So you could label and show tic marks on all four axes, with multiple grids and backgrounds, if you so desired.

Legend – While the Legend can be placed anywhere in the background area, it can also be placed inside of the chart area as demonstrated in this example where it can be positioned through further precision using X and Y coordinates.

Dwell highlight – This bar and pie specific feature can be customized to use a particular color for its background and border when a pointer is placed over the area. In this example a transparent gray and a blue border line was used for the dwell highlight.

Note (with an arrow) – This feature allows you to place a text note anywhere on the chart with options that include mapping to pixel, percent or axis (Bottom, Top, Left, Right). In this example the Vacation note also uses a line with an arrow style pointer.

Bar value label – This feature allows you to place a label (External, Top, Middle, Bottom) on a bar to displays its value. In a stacked bar, you can also choose to display the value label on a specific dataset stack as demonstrated in this example.

Grid line – This feature allows you to specify a grid type and set the lines to be horizontal, vertical or both. You can also customize the grid further to use different colors, line thickness, and also set the background color.

Background – This feature allows you to set the background to be a different color than what’s used in the center of the chart area. You can also customize further to use a background image, a single color or also combine two color gradients.

Border line – This feature allows you to customize the line thickness, color, of the border and also setting the corner type to be either square or rounded. This example demonstrates using a rounded gray border line.

Axis label – This feature allows the labels to display a value or a text label. The font type, size, angle and color can also be customized.

Axis tics – This feature specifies the lines extending out from the axis line. They can be customized to be a certain color or length as well.

Rotated title – The titles (left, right, header and footer) are placed outside of the chart area where the font type, size, angle and color can also be customized independently.

Stacked multi axes – This feature allows using multiple axes where each axes uses its own specific scale, font type, size, angle and color. This example demonstrates using a multiple right axis where the lower right axis uses an orange font color and a different scale than the upper right axis.

You can customize our charts further through countless combinations by using what we call Chart Definition Language or CDL, which is a collection of plain text parameters that describe a chart. These CDL parameters can be edited manually or by using our design studio NetCharts Designer which enables you to create and manage charts, graphs, tables, and interactive dashboards.

Also see related blog post – What is CDL?

If you have any questions, feel free to contact us at support@visualmining.com.

Comments are closed.