Dos and Don't s for Charts and Graphs

1. Do use the full axis.

      For bar charts, the numerical axis must start at zero. Our eyes are very sensitive to the area of bars, and we draw inaccurate conclusions when those bars are truncated.  See the difference between the original chart and truncated chart generated by JavaScript chart library VanCharts.

JavaScript chart library VanCharts

      You should not skip values when you have numerical data. Use the full axis and do not skip values when you have numerical data. The trend is distorted if you do not have even intervals between your dates. Make sure your spreadsheet has a data point for every date at a consistent interval, even if that data point is zero. 

      The x-axis in the "wrong example" below has a time-series with inconsistent intervals giving a distorted view of data over time.

JavaScript chart library VanCharts

Chart from JavaScript charts VanCharts

2. Do Highlight what’s important.

      JavaScript Chart elements like gridlines, axis labels, colors, etc. can all be simplified to highlight what is most important. Although it is possible to tell hundred stories using a single line chart, it makes a lot of sense to keep the focus on just one story. Therefore you should highlight just one or two important lines in the chart, but keep the others as context in the background.

JavaScript chart library VanCharts

Chart from web

3. Do use proper aspect ratio to minimize dramatic slopes effects.

      If you have much data, consider use the function “Scaling chart” to help readers. Coordinate axis scaling control is generated for the scaling chart area, so that the user can preview data from different dimensions. Scaling is also possible with the mouse to directly select an area. Here are the examples generated by JavaScript charts VanCharts.

JavaScript chart library VanCharts

Chart from JavaScript charts VanCharts

4. Do use the unified style.

      One of the easiest ways to get the most out of charts is to rely on comparison to do the heavy lifting. Our visual system can detect anomalies in patterns. Try keeping the form of a chart consistent across a series so differences from one chart to another will pop out. Use the same colors, axes, labels, etc. across multiple charts. Here are the examples generated by JavaScript charts VanCharts.

JavaScript chart library VanCharts

Chart from JavaScript charts VanCharts

5. Do choose the chart type wisely.

      Choose the chart type dependently on what you want to show. Get to know the pros and cons of each chart type. Before you start charting, take a step back and ask yourself what are the main questions you want to answer. Choose the right chart type that is best for finding specific patterns and gain possible new insights in your data. Like tools in a toolbox, JavaScript charts and graphics are better suited to some tasks than others. Pie charts are excellent at showing a whole with between two and four distinct categories; time series come alive in simple line graphs; and bar charts make visual comparisons of multiple groups a breeze.

JavaScript chart library VanCharts

      See more: How to Choose the Right Chart Type for Your Data

6. Do have titles.

      Simple, straightforward titles attract viewers. Include a short title that either describes the data (for example, the relationship between voter turnout and weather) or the specific pattern you wish to show (i.e.: estimated number of potential voters deterred by rain or snow on Election Day).

      See more: Tips for Writing Great Chart Captions

7. Don't use more than six colors.

      Using color categories that are relatively universal makes it easier to see differences between colors. The more colors you need, the harder it is to do this. But different colors should be used for different categories (e.g., male/female, types of fruit), not different values in a range (e.g., age, temperature).

      We often think that the order of colors in our "rainbow" is easy for everyone to understand, but this order is not universal and will make JavaScript charts and maps harder to read. If you want color to show a numerical value, use a range that goes from white to a highly saturated color in one of the universal color categories. No rainbows.

JavaScript chart library VanCharts

8. Don't overload the chart.

      Adding too much information to a single chart eliminates the advantages of processing data visually; we have to read every element one by one! Therefore try to avoid the use of pie charts when comparing a large number of items. Simple pie charts displaying 2-5 categories may work just fine, but when displaying more data it is better to choose another chart type, most often bar or column charts will be a much better alternative. Or remove or split up data points, simplify colors or positions, etc.

JavaScript chart library VanCharts

Chart from JavaScript charts VanCharts

9. Don’t forget 7%-10% of your male audience (color deficiency)

      Remember, 7% to 10% of the male audience have color deficiency issues (color blindness). Therefore make your JavaScript charts safe against color-blindness. As an example consider the following chart.

JavaScript chart library VanCharts

Below you have the same chart displayed as a color-blind person would see it.

JavaScript chart library VanCharts

If the chart is readable in black and white than it is even better!