Tell your story with Charts

Published December 20, 2020
by Lipis

Telling a story

Charts primary reason to be created is to tell a story. I don’t know about you, but I often spend a lot of time configuring the chart to be telling the story I want. I will make one or two elements stand out by changing their color, adding arrows to annotate some parts, adding white boxes around information that’s extraneous… Unfortunately, this is often not well supported by charting libraries.

In my ideal workflow, I want to take the data and generate the chart, then treat all the elements of the chart as free form and modify them however I want. This is exactly how Excalidraw charting feature works! Once your chart is generated, you can use all the power of Excalidraw to style it, move things around, hide some details…

Examples

Copy any two columns data from Excel, Spreadsheet, or even HTML tables and paste it directly to Excalidraw. It will work when the number of columns is one or two.

https://excalidraw.com/#json=6035723371151360,_YC8ms6v1fhghy3SCLYljQ

But it doesn’t stop there. You can also copy the data from a plain text file as comma separated values (CSV). Open your favorite editor, type the values separated by comma or tab, copy/paste and you are ready to go. Here is another example from the data bellow the chart.

https://excalidraw.com/#json=4659903914311680,mBoVCGfah7dPzNI90_8JcA

1Day,Commits
2Sun,143
3Mon,167
4Tue,92
5Wed,114
6Thu,128
7Fri,155
8Sat,193

Modifying the chart

Once the chart is imported you can select it and change any of the properties to adjust it to your needs. For example, here is the story of Excalidraw traffic in 2020.

https://excalidraw.com/#json=6443031091740672,amxJZJxlZAlUBLADWIukFg

Implementation

The implementation of this feature was done in two iterations and if you are interested on how it was done, check out the first pull request by petehunt and the second one by lipis. If you find any edge case, submit an issue and we will make sure to address it!