5 tips to increase the usability of your charts

      Chart is a visual representation of raw data. It makes data easy to understand, reveals relationships between data, amplifies the impact of data and converts raw data into useful information for managerial decision making.

      Here are 5 simple tips that will help you increase the usability of your charts:

1. Proper chart title

      A chart title tells the audience what the chart is for. It helps the audience read and understand the chart faster. Chart title should be descriptive and not too short. So it doesn’t cause a misunderstanding. For example, 2015-06 is better than 15-06.

      But it not means we have to write a long title, because the audience always gets only a few seconds to see the chart and make sense of it. Consider the two following sentences:

      Market Share Percentage of January 2014 to January 2015

      Market Share Perc.(Jan 2014 to Jan 2015)

      The second option holds the specificity of the data without any loss of information.

JavaScript charts draft lines

Chart is from JavaScript chart library VanCharts

2. Data Labels

      All relevant data points should be labelled. There is no compulsion to label every data point. It depends on what point you are trying to prove with the JavaScript charts. But the labels should not clutter the chart and hurt audience understanding. Space them out and make them legible. This is more important when we are using a horizontal chart (column, line, area, waterfall etc). The labels are sometimes long or there are too many of them in a small space, then we can slant them for better readability instead of rotating them.

JavaScript charts category axis labels

Chart is from JavaScript chart library VanCharts

3. Tips on dynamic data point

      The combination of charts and data provides higher accuracy for user to present data. When we have much information to show, putting the detailed info in tooltips is of immense help. Only when the user is interested in getting more info about a data set, he hovers over it and gets all the required information. Your JavaScript charts stays clean, yet you have given out all the info.

JavaScript charts dynamic data point

Chart is from JavaScript chart library VanCharts

4. Arrange the data in order

      If the data is name or category-based, and not time-based, it is a good idea to arrange the data in descending/ascending order.

      This is particularly helpful when you have a lot of data sets to display on the JavaScript charts. With arranged data, it is very easy to find out who your best sales person is, which marketing medium is the best converting one and which state has the best employment rate.

5. Trend line and warning line in charts

      Trend lines are used to graphically display trends in data and to help analyze problems of prediction. Such analysis is also named regression analysis. By using regression analysis, you can extend a trend line in a chart beyond the actual data to predict future values. But you cannot add a trend line to data series in a stacked, 3-D, radar, pie, surface, or doughnut chart.

      Warning lines are used to analyze the progress of a target. A number of warning lines can be added into JavaScript charts to achieve early warning. Like report, we can add early warning in charts to see whether data in charts has exceeded indexes. For example, in the following individual product sales chart, 250 is defined as qualified, and 500 as excellent: A number of warning lines can be set, and the font, color, style, and content of warning line can be customized.

JavaScript charts dynamic data point
JavaScript charts dynamic data point

Chart is from JavaScript chart library VanCharts