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.

JavaScript Charts VanCharts

      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.

JavaScript Charts VanCharts

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’.

JavaScript Charts VanCharts

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.

JavaScript Charts VanCharts

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.

JavaScript charts VanCharts

Chart from JavaScript chart library VanCharts