# Looking for ALL the charts

**URL:** <https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137>\
**Category:** Request Feedback\
**Created:** [March 22, 2021, 7:15am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137 "2021-03-22T07:15:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![terezka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/terezka/32/579_2.png) [@terezka](https://discourse.elm-lang.org/u/terezka)\
**Post date:** [March 22, 2021, 7:15am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/1 "2021-03-22T07:15:10Z")

</div>

Hi everyone!

I recently did some consulting which brought be back to working on the elm-charts library. I’d like to make sure the new version of the API can cover all the use cases people have, but I’m not sure if I’m missing some! Thus I want to ask you all if you would post a picture of whatever charts you have ever needed to make or will need to make, so I can cover them. Feel free to send them to [tereza@elm-lang.org](mailto:tereza@elm-lang.org) or post them here! Thank you in advance and have a great day! 😊

---

<div class="post-metadata">

**Author:** ![Sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sebastian/32/98_2.png) [@Sebastian](https://discourse.elm-lang.org/u/Sebastian)\
**Post date:** [March 22, 2021, 9:06am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/2 "2021-03-22T09:06:13Z")

</div>

These are the ones we use in our app (using Highcharts)

A column chart. Some columns are overlayed on top of others.

![bar-chart-overlay](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/d7d295a8ea775af86fe78dd604ffdf428a244618.png)

Stacked bar chart  
 ![stacked-bar-chart](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/8/8abc1f66c749e9a40aa3e56bc95b1a531a623af2.png)

Stacked bar chart (relative)  
 ![stacked-bar-chart-relative](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/47933ca2959e4addec24b4e2acd412867e54b7cb.png)

Line  
 ![line-chart](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/1/11a7f805076dd21a31137348b0523f0ee65b6640.png)

Area chart  
 ![area-chart](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/5/59642dafb301e573701d9a04a6e79acdb18bae0c.png)

Bubbles  
 ![bubble-chart](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/e/e721bdbb9b5ff2b106208dd3a1659463e4005481.png)

Mini area chart  
 ![sparkline](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/401929bdfdf6fdb69af885d7ccc43944dc1c34e9.png)

Sparklines  
 ![spark-lines-bars](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/3/3156ecb1f8de5edc87414666c4324b9312b20800.png)

Thanks

---

<div class="post-metadata">

**Author:** ![ChrisWellsWood](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/chriswellswood/32/5293_2.png) [@ChrisWellsWood](https://discourse.elm-lang.org/u/ChrisWellsWood)\
**Post date:** [March 22, 2021, 9:12am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/3 "2021-03-22T09:12:29Z")

</div>

Hi @terezka, here are some charts that are in a web app that we’re making at the moment:

Bar charts

 ![Screenshot from 2021-03-22 09-02-48](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/8/8176f2d23009588e26e7af25ff5ce9eb9b1e729a.png)

Histograms

 ![Screenshot from 2021-03-22 09-04-04](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/b/b7bd3e67cf704834db30cfd9a09641f26cab75e0.png)

2D Histograms and line plots

 ![Screenshot from 2021-03-22 09-03-37](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/d11c4126dd97ec2ce53a3b9df18809e8924060c8.png)

We’ll probably have some scatter plots too.

We’re using `elm-vegalite` at the moment, which is really powerful, but we’ve found it very difficult to wrap our heads around. Most of the time it just feels like trial and error! I used `elm-charts` in a previous application, and really appreciated the “Tuftian” approach that you took.

---

<div class="post-metadata">

**Author:** ![edkelly303](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/edkelly303/32/1510_2.png) [@edkelly303](https://discourse.elm-lang.org/u/edkelly303)\
**Post date:** [March 22, 2021, 9:26am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/4 "2021-03-22T09:26:25Z")

</div>

We have this one:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/ddc07803db0e945a345d9204f865219dae769bc9.png)  
which I made with `terezka/line-charts` 2.0.1 (thank you!)

I remember that I originally wanted the x axis to start with “Jan” and end with “Apr”, but I couldn’t figure out how to adjust the way that the library chose the values for the axes. But it was good enough for our purposes so I shipped it 🙂

---

<div class="post-metadata">

**Author:** ![terezka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/terezka/32/579_2.png) [@terezka](https://discourse.elm-lang.org/u/terezka)\
**Post date:** [March 22, 2021, 9:59am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/5 "2021-03-22T09:59:55Z")

</div>

This is SO helpful, thank you!!

---

<div class="post-metadata">

**Author:** ![Janiczek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/janiczek/32/4516_2.png) [@Janiczek](https://discourse.elm-lang.org/u/Janiczek)\
**Post date:** [March 22, 2021, 10:04am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/6 "2021-03-22T10:04:02Z")

</div>

> [@ChrisWellsWood](#):
>
> We’re using `elm-vegalite` at the moment, which is really powerful, but we’ve found it very difficult to wrap our heads around.

I’m glad I’m not the only one who found it a bit perplexing 🙂

---

<div class="post-metadata">

**Author:** ![terezka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/terezka/32/579_2.png) [@terezka](https://discourse.elm-lang.org/u/terezka)\
**Post date:** [March 22, 2021, 10:08am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/7 "2021-03-22T10:08:30Z")

</div>

(That timeline issue is fixed in the upcoming version!)

---

<div class="post-metadata">

**Author:** ![jfine2358](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jfine2358/32/3875_2.png) [@jfine2358](https://discourse.elm-lang.org/u/jfine2358)\
**Post date:** [March 22, 2021, 10:15am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/8 "2021-03-22T10:15:39Z")

</div>

Hi @terezka

Apology: After I posted I read the comments above from @ChrisWellsWood and @Janiczek. Those who already know Vega can skip most of this post.

Thank you for the great work you and others are doing. You asked:

> [@terezka](#):
>
> I recently did some consulting which brought be back to working on the elm-charts library. I’d like to make sure the new version of the API can cover all the use cases people have, but I’m not sure if I’m missing some.

I’m new to Elm but have a long background in publishing, both print and online. Based on that, perhaps you should look at [Vega](https://vega.github.io/vega/).

> A Vega specification defines an interactive visualization in a JSON format. Specifications are parsed by Vega’s JavaScript runtime to generate both static images or interactive web-based views. Vega provides a convenient representation for computational generation of visualizations, and can serve as a foundation for new APIs and visual analysis tools.

The have a long [Example Gallery](https://vega.github.io/vega/examples/).

The Nature science journal published an article on the use of Vega and other tools:

[Data visualization tools drive interactivity and reproducibility in online publishing](https://www.nature.com/articles/d41586-018-01322-9).

People who do data science and Jupyter notebooks use Vega. Disclaimer: I’ve never used Vega myself.

---

<div class="post-metadata">

**Author:** ![terezka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/terezka/32/579_2.png) [@terezka](https://discourse.elm-lang.org/u/terezka)\
**Post date:** [March 22, 2021, 12:45pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/9 "2021-03-22T12:45:09Z")

</div>

Hi @jfine2358! Welcome to Elm and thank you for your suggestion! That is a wonderful and extensive gallery, though I’m partially asking because I won’t have time to implement everything at once, so I’m looking to see what people usually use, so I know what to prioritize / what should be the easiest to implement! Should have clarified in the post, but definitely still a useful resource for inspiration- thank you! 😊

---

<div class="post-metadata">

**Author:** ![cwhy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cwhy/32/558_2.png) [@cwhy](https://discourse.elm-lang.org/u/cwhy)\
**Post date:** [March 22, 2021, 2:26pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/10 "2021-03-22T14:26:31Z")

</div>

A lot of plotting packages for other languages integrates statistic and data exploration basics to their API, e.g. histogram, but I feel that would be decoupled as a type of bar plot.

I use heat-map to explore data very often, examples can be found here:  
[https://seaborn.pydata.org/generated/seaborn.heatmap.html](https://seaborn.pydata.org/generated/seaborn.heatmap.html)

---

<div class="post-metadata">

**Author:** ![mattpiz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mattpiz/32/860_2.png) [@mattpiz](https://discourse.elm-lang.org/u/mattpiz)\
**Post date:** [March 22, 2021, 3:16pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/11 "2021-03-22T15:16:56Z")

</div>

On a slight tangent, I really enjoy “Data Voyager” to explore data ([Voyager 2](https://vega.github.io/voyager/)). That tool is based on Vega for the visualization, but if such a tool was made in Elm, I’d find it super cool. It could use elm-vega of course but I guess it could also be done with elm-charts so that is something that might interest @terezka. It’s probably a very pragmatic subset of all the charts supported by Vega.

---

<div class="post-metadata">

**Author:** ![terezka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/terezka/32/579_2.png) [@terezka](https://discourse.elm-lang.org/u/terezka)\
**Post date:** [March 23, 2021, 8:56am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/12 "2021-03-23T08:56:15Z")

</div>

Ooh, very cool! Will add that to the project backlog!

---

<div class="post-metadata">

**Author:** ![grigorious](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/grigorious/32/3549_2.png) [@grigorious](https://discourse.elm-lang.org/u/grigorious)\
**Post date:** [March 23, 2021, 10:30am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/13 "2021-03-23T10:30:40Z")

</div>

We use grouped bar charts:

 ![PCI_distribution_2020](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/0/09a7bed5f9764da9a29d70987e14411d209a821c.png)

---

<div class="post-metadata">

**Author:** ![turboMaCk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/turbomack/32/355_2.png) [@turboMaCk](https://discourse.elm-lang.org/u/turboMaCk)\
**Post date:** [March 23, 2021, 11:13am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/14 "2021-03-23T11:13:48Z")

</div>

This is what we have

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/8/865e9ddce035b4b57f3a52df0aec6179399d91f2.png)

All of them have some sort of mouse interactions.

also cc @Janiczek to share what GWI has

---

<div class="post-metadata">

**Author:** ![solificati](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@solificati](https://discourse.elm-lang.org/u/solificati)\
**Post date:** [March 23, 2021, 9:12pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/15 "2021-03-23T21:12:14Z")

</div>

I would recommend you to look into Grammar of graphics and related papers for inspiration. If you provide small building blocks in your API (encodings, marks, projections) and combinations for making bigger charts from smaller ones you would be set.

I’m developing dataviz library in my company and I got few big ”aha moments “ from these papers. Extracting smallest charts (without guides - axes and so on) and combining them with nesting and stacking operations could lead to great results like violin plots, ridgelines, grouped bar charts, historical scatterplot or marginal histograms.

Also talk with people who design visualization, not only developers. Their vocabulary could teach you a lot. They do think with “variable encodings” and “projections”.

And interactivity is hard. Very hard.

We have storybook where we have reimplemented most exotic examples from Vega and Semiotic. And few cool ones from observablehq.

---

<div class="post-metadata">

**Author:** ![terezka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/terezka/32/579_2.png) [@terezka](https://discourse.elm-lang.org/u/terezka)\
**Post date:** [March 24, 2021, 11:42am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/16 "2021-03-24T11:42:40Z")

</div>

Thank you for the recommendation, that’s great advice! Will definitely look into those.

> And interactivity is hard. Very hard.

I’m curious what kind of interactivity do you refer here?

---

<div class="post-metadata">

**Author:** ![solificati](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@solificati](https://discourse.elm-lang.org/u/solificati)\
**Post date:** [March 24, 2021, 4:03pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/17 "2021-03-24T16:03:00Z")

</div>

> [@terezka](#):
>
> I’m curious what kind of interactivity do you refer here?

Most common ones: brushing, panning and zooming. On one hand most of them are very stateful, on the other hand you want to have good data representation of interaction. Vega uses `selection` streams and they are quite good but vega has full control over rendered markup.

---

<div class="post-metadata">

**Author:** ![mje](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mje/32/3369_2.png) [@mje](https://discourse.elm-lang.org/u/mje)\
**Post date:** [March 24, 2021, 4:18pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/18 "2021-03-24T16:18:47Z")

</div>

Here are some charts I’ve created with other softwares recently which have features that don’t seem to be represented in this topic yet. I hope it helps.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/f/f0dda4f5f558be6d7ca867d417ef67c7ab195148.png)

![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/9/9407425c1cae8e0ad9ffe9cdc64e9ab06354c885.png)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/7/71988c1115d24cb2d1c47852198736a73dddefdf.png)

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jwolondon/32/605_2.png) [@jwoLondon](https://discourse.elm-lang.org/u/jwoLondon)\
**Post date:** [March 28, 2021, 9:30am UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/19 "2021-03-28T09:30:30Z")

</div>

I’d echo the recommendations to look systematically at the ways in which we can structure chart design. Wilkinson’s _Grammar of Graphics_ and related implementations (e.g. [ggPlot](https://ggplot2.tidyverse.org/index.html), [Vega-Lite](https://vega.github.io/vega-lite/) and [elm-VegaLite](https://package.elm-lang.org/packages/gicentre/elm-vegalite/latest/) etc.) attempt to do this by looking at the design process itself as a series of transformations, which is especially handy for writing APIs and libraries.

But you may also find it useful to structure the charts themselves using some kind of taxonomy. The [FT Visual Vocabulary](https://ft-interactive.github.io/visual-vocabulary/) provides a nice example of this, which may help you relate the design space to the tasks that each chart attempts to address.

---

<div class="post-metadata">

**Author:** ![drathier](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/drathier/32/915_2.png) [@drathier](https://discourse.elm-lang.org/u/drathier)\
**Post date:** [March 29, 2021, 2:18pm UTC](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137/20 "2021-03-29T14:18:53Z")

</div>

Might be an edge case, but I’ve missed the ability to stack charts on top of each other, with different scales. Most notably, line/scatter charts on top of 2d histograms/heatmaps.

[Next page](https://discourse.elm-lang.org/t/looking-for-all-the-charts/7137.md?page=2)