Feature Update – new chart options! *color, *type: line, *ticks, multiple axes, and more

Here’s what’s new:

Pretty chart colors

We’ll start with the easy stuff. Splash up your graphical displays with some color.

To start, you can find your favorite color from this website: http://colours.neilorangepeel.com

Copy down the rgb code. For example, if you’re a fan of peachpuff, the code you want looks like this: rgb(255,218,185)

When you’ve got your fav, you simply add it to your chart’s *data using the *color keyword, like so:

In this example, we’re only using one color, not six. We’ll get to adding multiple colors in a bit.

If you want boring colors like solid “blue” or everyday “red”, then you don’t need the rgb. You can just type *color: blue. This will work for many of the basic colors, and a few of the more creatively named.

If you like the color you have, but it’s a little too intense, you can add *opacity to make it somewhat see-through, like this:

Opacity should be a number ranging from 0 (totally see through) to 1 (totally solid). Here’s how peachpuff looks with different levels of opacity:

If you have a custom color you want to use, go for it. The *color keyword will work with any rgb, not just the ones listed on the website above.

Line graphs

Let’s say I want to chart how my millions of dollars have grown over time (cause I’m saving for a yacht big enough to hold my helicopter).

I can use a line chart like this:

The code for this is pretty simple. You add data similarly as you would in a scatter plot, indicating the x and y points. You also do *type: line

Here’s the example:

Add *ticks – i.e., customize the look and position of the intervals on the axes

Charts with money are fun, but they’re hard to read without $ signs. Maybe I also only want to show intervals of $10,000,000, instead of $5,000,000. And maybe I want to call that $10 mil. instead of using all those annoying 0’s.

Let’s try this:

Much better!

Here’s how to do that:

It’s the same line graph as the one in the earlier example, but this time I’ve added something called “*ticks” indented beneath the *yaxis keyword. The *ticks keyword let’s me specify [the numerical value of where I want the tick to go, “the label I want to give that tick”]

In the case of *ticks, the value comes first and the label comes second. With bar graphs, the reverse is true (bar label, then value). We didn’t do this to try to confuse you, but here’s a tip: in each case try to put the most important info first. Whereas both the bar label and value are required, the label on *ticks is optional information. You could also just have something like *ticks: [2, 4, 6, 8, 10], which would display just the even numbers and label them for you automatically.

By the way, I decided not to buy a yacht for my helicopter after all. Instead, I decided to learn the principals of Effective Altruism and give my money to highly efficient charities and save lives. Go me!

My new goal is to chart my quarterly distributions to charity. Instead of having an x-axis with years, I instead want them to say “Quarter 1”, etc… like this:

The code is very similar as the earlier code, except now I’ve also included *ticks for the *xaxis:

You’ll also notice that for the first *yaxis tick I used “” as the label, which means the label is just blank. This can sometimes be helpful for making your chart look a little smoother.

Don’t forget you can also use *min and *max beneath your *xaxis and *yaxis to help smooth things out. For example, the x-axis is looking a little crowded. If we set our *min at .9 and our *max at 4.1, they’ll be a little more room.


Here’s the code with the new *min and *max added:

Multiple *data keywords for multiple customizations

Now let’s return to colors. Remember my chart at the beginning? With all the super awesome colors? The key to this snazziness is using multiple *data keywords. Each *data keyword gets its very own *color keyword.

If you just indent *color: yourcolorhere beneath the *chart keyword, that color is going to apply to the entire chart. If you want to be more specific, then you’ve got to be more specific with your indents. Check out the below code and see what I mean:


Instead of lumping all my data points into one *data keyword, I split them up, so that I could then apply a unique *color attribute to each *data point.

The outcome to the above code will look like this:


If you want mostly light blue bars, with just one vibrant orange, then you do this:

The lightblue becomes the default color for all the bars, because it’s indented beneath the *chart keyword, but the color for the fourth bar is overridden with an orange color.

Multiple types of charts on one chart – and multiple axes on one chart

Let’s say you want a line graph AND a bar graph on one chart, cause you’re a chart maniac.

For example, you’re a farmer charting how many pounds of kale you sold and how much money you brought in. You want your final chart to look like this:

To start, you have two different types of charts. You’ll need to add multiple data keywords, one for each type of chart.

In our code above, we’ve used the numeric values of the summer months (6 for June, 7 for July, 8 for August). We’ve also indented the *type keyword beneath each data keyword to specify how to display the data. We’re showing the pounds sold as our bar graph data and the income made as the line graph data.

This code results in a pretty ugly chart though:

More work is needed! The number of pounds sold ranges from 32-44, while dollars earned ranges from $320-$396. Each data type will need its own *yaxis for good chart chemistry.

We can have multiple y-axes and/or multiple x-axes. We just have to be sure to give each a name, and then link their name beneath the data they serve. We also have to tell the program where to *position each axis: on the left, right, top, or bottom, like so:


In this code, we’ve now indented *yaxis: pounds beneath the bar graph data, because that’s the data it’s attributed to. “pounds” is just the name we made up, you can call your axes anything. We’ve also indented *yaxis: dollars beneath our line graph data.

Next, if you have multiple axes, you should specify their *position. In this case, we want the pounds’ *yaxis to be on the left side of the chart and the dollars’ *yaxis to be on the right side of the chart.

You always indent the specifications of an axis beneath a *yaxis or *xaxis that is indented beneath the *chart keyword, not beneath a *data keyword. Axes are attributes of the entire chart, and multiple *data keywords can share the same *yaxis or *xaxis information. That’s why, when you want to provide details about the axes (such as their *ticks, *position, *min, or *max), you include this info beneath the *chart keyword more broadly. In other words, this is bad:


Okay, now our chart looks like this:

Getting better! But still not great… Let’s change the *ticks on the y-axes so they’re more clear…


This is the same code as before, except now we’ve specified how we want the labels to read.

The easiest way to add *ticks to a chart with multiple axes is to first look at where the ticks naturally fall (in our earlier chart you can see there are lines on the 10, 20, 30, 40, and 50 marks on the left axis).

Once we know where the lines naturally fall, we can work with these existing lines to give them better labels. “10” becomes “10 lbs”, “20” becomes “20 lbs”, and so on. If you don’t like where the lines naturally fall, you can try first adding *min and *max values to the dominant axis.

The lines will only appear for one axis, not both. For the second axis, you just have to add labels wherever you’d like them to appear. In this case, we wanted the labels to increase by $25, starting with $300. We added code for the *ticks at the 300 mark, which would read “$300”, another at the 325 mark, to read “$325”, and so on.

Now our chart looks like this:

That’s pretty good! New *ticks for our *xaxis and some colors would improve things though. Plus, it’s hard to see the lines through the bars, so we should add some *opacity.

If we set the *min for the *yaxis: dollars to 275, that would also align the dollar values with the lines corresponding to the pounds, which would look swell!…

This final code generates the image we started this section with. For a reminder, it looked like this:

With our code, we didn’t need to specify a name for the *xaxis, because there’s only one. If we wanted to though, we could add more. One at the top too. We could even add multiple x-axes at the bottom! We could have 6 y-axes and 7 x-axes just because we were feeling crazy!