Look out for these lies with charts

 Chart’s purpose is usually to help you properly interpret data. But sometimes, it does just the opposite. In the right (or wrong) hands, bar graphs and pie charts can become powerful agents of deception, tricking you into inferring trends that don’t exist, mistaking less for more, and missing alarming facts. There's a simple takeaway from all this: be careful when designing visualizations, and be extra careful when interpreting graphs created by others.
      It helps to know the kinds of tricks that JavaScript charts can try to pull. Here are eight.

1. Puzzling Perspective

      Both of these pie charts show “labor” taking up 30 percent of some total. But you probably noticed that the chart on the right makes the labor slice look a lot bigger by positioning it in the foreground, which gives it a thick 3D edge and more than double the number of dark blue pixels than when it’s in the background.

      Human vision isn’t very good at interpreting the third dimension.When confronted with a 3D chart, we assume that more color indicates a greater amount. So when more pixels are used to represent one slice of a pie chart, the slice appears more significant. That’s why we can assign a greater value to foreground slices in 3D pie charts.

2. Swindling Shapes

      A classic way to lie with a chart is to introduce irrelevant information. In the chart on the right, the only relevant property is cone height. But, while the cone volume is irrelevant, it is also very difficult to ignore, encouraging us to assign a greater value to the larger part of the cone.

      In both JavaScript charts, administrative costs take almost a third of each dollar. While this matches reasonably with the left chart, the right chart seems to shrink administrative costs to something much less than a third. Anytime you ask anyone to judge just height and ignore the other measurements, it’s going to take extra cognitive load to disregard these other cues.

3. Truncated Y-Axis

      One of the easiest ways to misrepresent your data is by messing with the y-axis of a bar graph, line graph, or scatter plot. In most cases, the y-axis ranges from 0 to a maximum value that encompasses the range of the data. However, sometimes we change the range to better highlight the differences. Taken to an extreme, this technique can make differences in data seem much larger than they are.

      Let's see how this works in practice. The two graphs below show the exact same data, but use different scales for the y-axis:

4. Trendsetters Are Tricksters

      When two or more lines appear together in a chart, and they look similar to each other, we have the tendency to assume they are related. The red line in this chart represents suicide rates while the green line represents spending on science and technology—two completely independent sets of data. But on first glance, we tend to ask ourselves whether there could, in fact, be a causal correlation (if you can think of one, tell us in the comments section below).

      We like trends because they tell a story that make data more meaningful—that’s why we’re always on the lookout for connections, even when they don’t exist.

5. Using cumulative growth rates.

      Many people opt to create cumulative graphs of things like number of users, revenue, downloads, or other important metrics. For example, instead of showing a graph of our quarterly revenue, we might choose to display a running total of revenue earned to date.

We can’t tell much from this graph. It’s moving up and to the right, so things must be going well! But the non-cumulative graph paints a different picture:

      Now things are a lot clearer. Revenues have been declining for the past ten years! If we scrutinize the cumulative graph, it’s possible to tell that the slope is decreasing as time goes on, indicating shrinking revenue. However, it’s not immediately obvious, and the graph is incredibly misleading.

      There are lots of real-world cases of cumulative graphs that make things seem a lot more positive than they are. A prominent example is Apple’s usage of a cumulative graph to show iPhone sales.

6. Hiding in Plain Sight

      We’re pretty good at noticing trends. But what if there’s one that someone doesn’t want us to see? The left chart clearly shows that marketing costs have tripled over three years. This same fact is there in the right chart, but it’s hidden among a host of other data, softening the impact of the sharp incline in marketing costs, and making that incline nearly impossible to quantify.

      Comparing the change in height between data sets while they also move up and down is not a natural visual task for us. It’s not clear to me whether I’m supposed to be looking at the overall height or the width or what. Any kind of comparison like that is more cognitive and less effortlessly visual.

7. Honey, I Shrunk the Scale!

      At first glance these two JavaScript charts seem to depict two different data sets. But home in and you’ll see that the only difference is scale.

      This trick works because it’s difficult for us to examine a chart’s scale and data at the same time. Instead, we often get the gist of the curve first, then (if we decide we need to) look at the scale. By that point, though, our first impression has already been made.

8. Ignoring conventions

      One of the most insidious tactics people use in constructing misleading data visualizations is to violate standard practices. We’re used to the fact that pie charts represent parts of a whole or that timelines progress from left to right. So when those rules get violated, we have a difficult time seeing what’s actually going on. We’re wired to misinterpret the data, due to our reliance on these conventions.

      Here’s an example of a pie chart that Fox Chicago aired during the 2012 primaries:

      The three slices of the pie don’t add up to 100%. The survey presumably allowed for multiple responses, in which case a bar chart would be more appropriate. Instead, we get the impression that each of the three candidates have about a third of the support, which isn’t the case.

      Another example is this visualization published by Business Insider, which seems to show the opposite of what’s really going on:

      At first glance, it looks like gun deaths are on the decline in Florida. But a closer look shows that the y-axis is upside-down, with zero at the top and the maximum value at the bottom. As gun deaths increase, the line slopes downward, violating a well established convention that y-values increase as we move up the page.

What is a bubble chart

  When you have a table with 3 related dimensions of data, how do you represent it on a flat 2D chart? Put three column charts side by side, one for each dimension? Or use two XY-plot charts? But both of them will be ineffective in putting together all the 3 parameters in one elegant visualization. Time to say hello to the bubble chart.

Chart from JavaScript chart library VanCharts

What are bubble charts?

      Bubble charts or bubble graphs are extremely useful charts for comparing the relationships between data objects in 3 numeric-data dimensions: the X-axis data, the Y-axis data, and data represented by the bubble size. Essentially, bubble charts are like XY scatter graphs except that each point on the scatter graph has an additional data value associated with it that is represented by the size of a circle or “bubble” centered around the XY point.

      Column charts and line charts have 2 axes commonly – a numeric axis and a categorical axis. The Y-Axis is the numeric axis for column and line charts. This means that the quantitative magnitude of the plot is indicated by the position of the plot with respect to the Y-axis. Bubble charts are different, because both axes of a bubble chart are numeric. Hence, the position of the plot is an indicator of two numeric values. The area of the plot is an indicator of the magnitude of the third numeric characteristic.

      The bubble chart above is supposed to help you manage your investments in equities better. The X-axis and the Y-axis are used to denote Age of Investment and Return on Investment respectively. Apart from these 2 parameters, what is the third parameter that you would be interested in? Obviously, how much have you invested in a particular equity? So that is denoted by the area of the plot. Quite clearly, A has the largest ROI and the largest investment size as well.

      But you could have made that out from the data table itself. How did the bubble chart help you? Since we have taken up a very basic example, only 5 investments have been shown. But in reality, the number of investments will be much higher. In that case, the bubble chart will help you form a mental visualization like this:

The same bubble chart has been divided into 4 quadrants. Depending on the parameters, each of the quadrants has a particular meaning for you.

      Quadrant 1 - Best investments: Investments that have given high ROI in a short period of time. What else could you ask for? These investments are like jackpots.
      Quadrant 2 - Good investments: Long Age of Investment but great ROI. If you are planning to make further investments, you would surely invest in the equities in this quadrant.
      Quadrant 3 - Not-so good investments: Low ROI over a long period of time. Further investment on equities in this quadrant would be your last bet.
      Quadrant 4 - Decent investments: Manageable ROI over a short span of time. If you are thinking short-term investment, then this is your quadrant.
With a larger number of data plots, mental divisions like this are very helpful in determining the next course of action.

Where can bubble charts be used?

      Apart from using JavaScript bubble charts for investment, there are a whole lot of other places where bubble charts can be used. Some examples to stir up your imagination:

To see if higher promotional expenses lead to more footfall and in turn to more revenue for a bunch of retail stores for a month: The X-Axis can have the average daily footfall, Y-Axis the promotional expenses and the area of the plot will show the revenue generated by the outlet for that month. This can help find out which store was able to promote itself successfully and whose promos failed.

Checking if higher CPC leads to higher clicks and better conversions in PPC Campaigns: To check if your excess spending on increasing the CPC to get better ad positions are getting you more clicks and finally leading to more conversions, a bubble chart will be useful.

Bubble Charts in Business

      Bubble charts are often used in business to visualize the relationships between projects or investment alternatives in dimensions such as cost, value, and risk. By visualizing project portfolios using bubble charts, you can find clusters of relatively attractive projects in one area of the graph, such as areas of high value, low cost, and/or low risk, and compare them with relatively less attractive projects in a different area of the graph, such as an area of low value, high cost, and/or high risk.

In the bubble chart examples above, the most desirable quadrant is in the upper left (higher profit and lower cost) and the least desirable quadrant is the lower right (high cost and lower profits). Bubbles with larger areas have higher probabilities of success.

As you can see, studying a project portfolio in several bubble charts using different dimensions of business relationships can be a great help in making insightful business investment decisions.

Variants of the bubble chart

      What we have discussed till now are single-series bubble charts. You can also have multiple series of data plotted in the bubble chart. The series will then have different colors with the legend pointing out which color refers to which data series.

      In our Investments – Equities example, we can also show Mutual Funds in the same bubble chart.

      Using bubble charts like this, you can see view all your investments at once. Then you can decide which investments you should pump more money in and which ones should you divest.

Displaying zero or negative data values in bubble charts

      The metaphoric representation of data values as disk areas cannot be extended for displaying values that are negative or zero. As a fallback, some users of bubble charts resort to graphic symbology to express nonpositive data values. As an example, a negative value v < 0 can be represented by a disk of area v in which is centered some chosen symbol like "×" to indicate that the size of the bubble represents the absolute value of a negative data value. And this approach can be reasonably effective in situations where data values' magnitudes (absolute values) are themselves somewhat important—in other words, where values of v and -v are similar in some context-specific way—so that their being represented by congruent disks makes sense.

      To represent zero-valued data, some users dispense with disks altogether, using, say, a square centered at the appropriate location.

Data Proportional to Radius or Area?

      Bubble charts can be misleading if care isn’t taken to understand the relationship between bubble size and the data the size represents. If the data is proportional to the bubble radius, the data will be skewed because bubble area grows exponentially as the square of the radius (Area=π*r^2). For a proportionally accurate representation of the data, bubble data should be represented directly by the area using the circumference of the circle, which grows the bubble area linearly in relationship to the diameter (circumference=π*diameter).

      This isn’t to say that one should never use the radius to represent the data as it can be useful if one wants to exaggerate the differences between the data objects or projects. For example, if the bubble data is similar in magnitude and you want more easily contrast the bubbles. However, it should be specified on the chart as to what representation is being made. In Bubble Chart Pro™, one can choose between “Bubbles proportional to area” or “Bubbles proportional to radius,” and the selected relationship is stated on the resulting bubble chart.

Incorporating further dimensions of data

      Bubbles are usually differentiated by color, pattern, number or name labels, or a combination of these. Colors are usually adequate for small numbers of bubbles, but subtle differences in colors become difficult to distinguish in larger number of projects. Therefore, numbers corresponding to a chart legend becomes a more useful method of distinguishing bubbles.

      Hiding the bubble chart legend and using labels is another way to create more room in a bubble chart and easily identify the bubbles.

      Additional information about the entities beyond their three primary values can often be incorporated by rendering their disks in colors and patterns that are chosen in a systematic way. And, of course, supplemental information can be added by annotating disks with textual information, sometimes as simple as unique identifying labels for cross-referencing to explanatory keys and the like.

Crowded or Congested Bubble Charts

      Finally, congestion and overlapping bubbles can be a problem with JavaScript charts that have large numbers of bubbles or tight clusters of bubbles. This is a significant barrier to using bubble charts for analyzing such data, however, using features like the “zoom-boxes” in Bubble Chart Pro™ to instantly expand congested areas makes analyses of these types of JavaScript charts much easier.

What is a pie chart?

      A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented.

Pie charts are perhaps the most ubiquitous chart type; they can be found in newspapers, business reports, and many other places. But few people actually understand the function of the pie chart and how to use it properly. In addition to issues stemming from using too many categories, the biggest problem is getting the basic premise: that the pie slices sum up to a meaningful whole.

Pie charts are very widely used in the business world and the mass media. However, they have been criticized, and many experts recommend avoiding them, pointing out that research has shown it is difficult to compare different sections of a given pie chart, or to compare data across different pie charts. Pie charts can be replaced in most cases by other plots such as the bar chart.

Chart from JavaScript charts VanCharts

What data can be presented using a pie chart?

      Pie charts are a visual way of displaying data that might otherwise be given in a small table. Pie charts are useful for displaying data that are classified into nominal or ordinal categories. Nominal data are categorized according to descriptive or qualitative information such as county of birth or type of pet owned. Ordinal data are similar but the different categories can also be ranked, for example in a survey people may be asked to say whether they classed something as very poor, poor, fair, good, very good.

      Pie charts are generally used to show percentage or proportional data and usually the percentage represented by each category is provided next to the corresponding slice of pie.

      Pie charts are good for displaying data for around 6 categories or fewer. When there are more categories it is difficult for the eye to distinguish between the relative sizes of the different sectors and so the chart becomes difficult to interpret.

Uses of a Pie Chart

      The main use of a pie chart is to show comparison. When items are presented on a pie chart, you can easily see which item is the most popular and which is the least popular.

Various applications of pie charts can be found in business, school, and at home. For business, pie charts can be used to show the success or failure of certain products or services. It can be used to show market reach of a business compared to other comparable businesses.

At school, pie chart applications include showing how much time is allotted to each subject. It can also be used to show the number of girls to boys in various classes. At home, pie charts can be useful when figuring out your diet. You can also use pie charts to see how much money you spend in different areas.

There are many applications of pie charts and all are designed to help you to easily grasp a bunch of information visually.

When to Use Pie Charts

      There are some simple criteria that you can use to determine whether a pie chart is the right choice for your data.

      Do the parts make up a meaningful whole? If not, use a different chart. Only use a pie chart if you can define the entire set in a way that makes sense to the viewer.
      Are the parts mutually exclusive? If there is overlap between the parts, use a different chart.
      Do you want to compare the parts to each other or the parts to the whole? If the main purpose is to compare between the parts, use a different chart. The main purpose of the pie chart is to show part-whole relationships.
      How many parts do you have? If there are more than five to seven, use a different chart. Pie charts with lots of slices (or slices of very different size) are hard to read.

In all other cases, do not use a pie chart. The pie chart is the wrong chart type to use as a default; the bar chart is a much better choice for that. Using a pie chart requires a lot more thought, care, and awareness of its limitations than most other JavaScript charts.

Pie Chart Mistakes

      Care must be taken to retain the salient feature of the chart: the center. In a report on the number of words consumed each day, a pie chart was prettified with a highlight in the middle. That obscures the spot where the lines meet, and thus makes it impossible to judge angles, making the comparison more difficult.

      This is similar to the problem with a colleague of the pie chart, the donut chart. It is similar to the pie chart, but is missing a circular area in the center.

Chart from JavaScript chart library VanCharts

While the center may be a convenient spot for labeling, it degrades the chart’s readability. The comparison between separate pie or donut charts is also largely meaningless, and should be avoided. To show progression over time, line and bar charts are much better suited. To compare two different kinds of data (absolute numbers and fractions), it makes more sense to split them up by data to compare than by year.

Other distortions include the ubiquitous 3D pie chart, which introduces perspective distortion and requires our very underdeveloped sense of depth to make up for it. These JavaScript charts may be more spectacular, but in terms of communicating data, they are mostly useless.

Number of Slices

      The most common problem is trying to show too many categories in a single pie chart. Wikipedia has this beautiful specimen on the page on U.S. states by population. The first four states are clearly larger than any of the rest, and from there the chart turns from a meaningful visualization of numbers into a colorful pattern.

Chart from JavaScript chart library VanCharts

      A bar chart would have been a much better idea here, because it would have allowed easier comparison between the states. Grouping together states of similar size into separate charts with different scales would have made it possible to clearly see the differences for all of them, not just the most populous ones.

7 Tips to improve your Line charts

1. keep it simple

      Don’t use line markers unless you really need them to identify b&w printed JavaScript charts ;

      If you can’t easily see the pattern of each series you may have too many.

2. Don’t use a legend; directly label the series, instead.

      Separate legends are the worst-case scenario in the line chart world. Often one can find the legend below the chart, or in an arbitrary order. You want to allow instant identification of the lines, but forcing the viewers to look them up in a legend takes way too much time. Instead you should put the labels somewhere close to the lines.

      The great side effect of putting the labels next to the lines is that you no longer depend on fancy colors or disturbing symbols to identify individual lines. Extra points for simplicity.

3. Emphasize what is important

      If you are using different line styles you may be emphasizing some series more than the others; make sure that’s consistent with your users needs.

4. You don’t have to start the Y-axis scale at zero; break the scale if you need.

      Sometimes you hear the advice that every (line) chart should have a baseline of zero, otherwise it would be “lying”. As a counter-example, here’s sales using baseline zero.

Chart from JavaScript chart library VanCharts

      However, to minify the risk of confusing the readers with a non-zero baseline chart, I suggest to not draw the axes as connected lines. This way the y-axis doesn’t visually ‘touch’ the ‘ground’.

5. Finding a nice aspect ratio

      The big advantage of JavaScript line charts is that they enable the comparison of slopes, which is not easily possible in a bar chart, for instance. The problem, however, is that the perceivable slopes are highly dependent on the aspect ratio of the chart.

Chart from JavaScript chart library VanCharts

6. In a time series, the spacing between markers in the x-axis should be proportional.

      For example, if you have data for years 1980, 1990, 2000 and 2008, the spacing between 2000 and 2008 should be smaller than between other dates; if you can’t do it with line charts use a scatter plot.

7. If you are comparing two time series with very different units of measurement, consider using a logarithmic scale.

8. Don’t use JavaScript line charts for categorical data; if you need a profile chart use a scatter plot and switch axis.

Chart from JavaScript chart library VanCharts

Data visualization dos and don’ts

    Data visualization tools are a great way to create impactful reports. A well designed report can give users an understanding of their data quickly and easily. And with tools like JavaScript chart library VanCharts, users can now quickly visualize and understand vast amounts of data.

Do

1. Have a goal in mind.

      Have a specific message you want to communicate. Identify the relationships and patterns of your data and focus on what you want to show.This may sound obvious, but by understanding what information you want the visualization to get across, you are more likely to accomplish it.

2. Keep it simple

      Analytic results shouldn’t be presented to 10 decimal places when the user doesn’t need that level of precision to make a decision or understand a concept. Effective visual interfaces avoid 3-D effects or ornate gauge designs when simple numbers, maps or JavaScript charts will do. This is the golden rule. Always choose the simplest way to convey your information.If it’s not important to the message you are trying to get across, eliminate it.

3. Highlight the important information

      Use color, size, and position to help the reader see what is important. Color adds emphasis, highlights particular data points, and draws connections between JavaScript charts. The hue, value, and intensity of the color are significant and may have cultural or social connotations.

      Size and position draw attention to particular data points and show hierarchy. The top of JavaScript charts and larger objects tend to draw the eye first. Cultural reading conventions also determine how people read charts.

      Color contrast can attract the eye and draw attention to particular data points. Place the largest slices in a pie chart at the top because the eye is naturally drawn there first.

4. Choose the correct charts types

      Numbers don't lie, but a bad chart decision makes it extremely difficult to understand what those numbers mean. For instance, if you are comparing data with similar values, a pie chart may not allow the user to distinguish the difference in values. A bar chart may be a better option.Here are the examples generated by JavaScript chart library VanCharts.

      Bar charts

      Depict nominal data. They are often used to illustrate comparisons. The value axis should always start at zero and use a consistent scale.

Chart from JavaScript chart library VanCharts

      Pie Charts

      Depict slices of a whole. There should not be more than five slices, and their total value should equal 100%. The largest slice should start at the top and fall to the right.

Chart from JavaScript chart library VanCharts

      Scatter Plots

      Depict relationships between two variables. They are effective with large datasets and to highlight patterns or correlations. Danger: the reader may assume a cause-and-effect relationship between the X and Y axes even when there isn’t one.

Chart from JavaScript chart library VanCharts

      Line charts

      Depict patterns over a continuous range. They do not have to start at zero, but the data ranges should be clearly marked and the overall chart shape should retain a 5:8 height and width ratio.

Chart from JavaScript chart library VanCharts

5. Use the full axis to avoid distortion.

      If there is a break in the axis, the comparison among data points can be very deceiving. Your users could reach an incorrect assumption.

Chart from JavaScript chart library VanCharts

6. Make sure you include a descriptive title, including the x / y axis.

      A) Include a compelling title to orient the viewer and communicate the main focus of the visualization. Do not capitalize all letters or make them bold.

      B) Include titles in the x and y axis.

      C) If the titles are too long (bar charts), rotate so they are not truncated.

Don’t

1. Maximize the data-ink ratio

      If there is a break in the axis, the comparison among data points can be very deceiving. Your users could reach an incorrect assumption.

2. Use special effects, such as 3D graphics.

      The perspective added in 3D graphics distorts the data and makes it difficult to interpret accurately. 3D perspective distorts the overall length of the bars. 3D perspective misrepresents the surface area of slices, distorting slices in the front to appear larger. Here are the examples generated by JavaScript chart library VanCharts.

Chart from JavaScript chart library VanCharts

3. Make it an eye test.

      Make sure you can read everything. This is especially important since some JavaScript charts will be viewed on a smaller screen, like a tablet or smart phone.

Chart from JavaScript chart library VanCharts

4. Make assumptions about your audience.

      Use industry jargon and acronyms sparingly. Not everyone knows what they are.You need to understand who will be viewing the report

      Are they Technical? Operational? Management?

      You want to make sure the users will understand the data and visualization.

      With all the various chart types and visualization options, you are sure to find a visualization that helps your audience better understand their data. Use this list not as a complete checklist, but as a guide to help you on your way. Happy visualizing.

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.

      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.

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.

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.

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.

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.

      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.

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.

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.

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

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