I am learning how to make candlestick charts with my computers. There are a number of libraries doing this already, but I have worked from scratch. Here is my example.

enter image description here

There seem to be variants out there with two colors or with auxiliary lines.

(source: github.io)


I am worried about things like color and proportion. Does the thickness matter? How can I help the readability of my chart making it friendly to the eye and uncluttered?

It doesn't help that I have used random test data. Here is a more typical example in Black and White.


Original Candlesticks are black and white. Black for down days (Bears are in control) and White or hollow for up days (Bulls are in control).

These days people use colours to make them easier to read. The colours can be based on "open vs close" or "net change". Open vs Close is original candlesticks with color (usually red and green).

The chart can also be drawn using two scales. Logarithmic and Arithmetic. Logarithmic is more popular with technical analysts.

Checkout http://stockcharts.com/school/doku.php?id=chart_school:chart_analysis for more information.

Checkout this ruby gem. The code shows how to get historical data from Yahoo Finance so you can create charts with real data.


| improve this answer | |

Yes! Colors and line thickness all matter. They add complexity to the image, increasing the amount of information the user has to absorb to understand.

This question is about your audience: Are they academic? If so, you might want to stick with 'original' versions. If your audience is general you could have more liberty to add some visual design to strengthen the candlestick so that they are distinct against the background. The spaces between the candlesticks create shapes of their own. Making the charts appear somewhat solid will make the background appear as a plane behind the solids.

Check out these resources for additional guidance:

| improve this answer | |

First, auxiliary lines of the legend are a great help. Vertical: in your exemplary case I wouldn't bother about vertical lines, since the step is pretty clear — it's 0.5, but if you look at the Dow Jones chart, you can see they could be really helpful for the user to follow the days. With candlesticks chart vertical lines of legend can interfere with prediction sticks and complicate their readability, so they should be as subtle as possible (I typically go with a shade of grey, something between #f3f3f3 and #cecece). Horizontal: are simply vital. Without them the viewers can only guess roughly about the value of a stick or a candle somewhere in the middle of the chart.

How to use and design the legend lines effectively: Tufte gave an exhaustive concept of the legend design, and you can google it by the "data-ink" keyword.

Second, two-colored candlesticks are more readable than the combination of colored and stroked ones.

Third, visual clutter.

  1. If you compare your chart to the other examples, you will see that other charts have more air — more "white" space in them, so that data doesn't fill all the coordinates. Allow some margins between the data and the border, it will help decluttering.
  2. Coloring sticks will also help to de-clutter.

  3. There should be some space between the sticks, either vertically (like in Don Jones) or horizontally. Avoid making chart look like a bunch of a parallel black lines.

  4. Legend in your example has too high contrast and therefore is too aggressive. Again, data ink concept will help to work this out.

Fifth, the thickness here works as an aid (albeit non data-transmitting) to visual differentiation between the candle and the stick. Right now the width contrast on all four charts is pretty similar and perfect for recognition: stick is 1 px, candle is cca 20 px. If you play with the candle width, you will see that anything less than 20, like 10 or 5 px, is too close to stick, and anything more, like 30 or 50 px, is too much and thus "kills" the stick, by rendering it visually unimportant.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.