5 easy tips to replicate a chart using CDL

February 14, 2014
Design Approaches

Once in a while I come across a chart that looks really interesting that I would like to try replicating. This is a fun exercise since it’ll allows me to sharpen my CDL (Chart Definition Language) skills and learn new things as well. Believe it or not, there aren’t too many charts that aren’t possible to recreate using out CDL. Perhaps this blog entry will inspire you to try it out as well!



  1. The first step is to take a close look at the chart you want to build and figure out if it really would be something that you could replicate using CDL. Usually it is!
  2. Next you will need to figure out the best fit of which chart type to use as the base template. Sometimes what may be the obvious choice for a chart type may actually not be a good match. For example, at first glance it may look like a Bar chart but it may be easier to use a Combo chart for more flexibility.
  3. Using the HTML CDL doc for reference, start building the base template and recreate any of the hard parts first such as multiple axis, grid and data mapping.
  4. Then add on the easier bits last such as text and colors.
  5. Finally to polish things up and make the chart stand out, you may decide to use certain gradient effects, or different colors on certain parts of the chart such as the bars, lines, text etc.

Recreated using a ComboChart:


If you have created charts that you’re especially proud of, feel free to share them by sending them in to

Comments are closed.