# New release of elm-charts!

**URL:** <https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563>\
**Category:** Show and Tell\
**Created:** [July 19, 2021, 10:36am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563 "2021-07-19T10:36:29Z")\
**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:** [July 19, 2021, 10:36am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/1 "2021-07-19T10:36:29Z")

</div>

Hi everyone,

I released a new version of elm-charts today! Features include:

- 👋 Great support for interactivity
- 👯‍♀️ Mixed chart types
- ❣ Easily add irregular details
- 🖼 Tons of examples

Check it out at [elm-charts.org](https://elm-charts.org/)!

Thanks to everyone who gave me feedback on the library ❤

---

<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:** [July 19, 2021, 10:40am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/2 "2021-07-19T10:40:47Z")

</div>

Amazing, thank you! The site is beautiful and the API looks really good, I will enjoy exploring this!

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [July 19, 2021, 11:52am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/3 "2021-07-19T11:52:22Z")

</div>

What a beautiful page! Two small details about it: The code blocks have `overflow-x: scroll` instead of `overflow-x: auto`, so I get an unnecessary scrollbar most of the time:

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

Also, the code blocks seem to have very small line height – for example, you can see how `,` and `]` below bump into each other.

Note that on a Mac, you need to connect an external mouse or set `General > Show scroll bars: always` to see the unnecessary scroll bars (Windows and Linux users see it out of the box):

 ![Screen Shot 2021-07-19 at 13.51.39](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/c/c738ec9f5ec760ea1c96ce3ab27800f4a16eb4cb.jpeg)

---

<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:** [July 19, 2021, 12:09pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/4 "2021-07-19T12:09:46Z")

</div>

Thank you for the feedback! I think I fix both issues now. Do you think the line height should still be larger?

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [July 19, 2021, 12:18pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/5 "2021-07-19T12:18:10Z")

</div>

> [@terezka](#):
>
> Do you think the line height should still be larger?

Maybe! The current line height works, though I spontaneously thought it might look a little bit cramped. I inspected VSCode and some sites with code blocks (in documentation), and the line height seems to be commonly closer to 1.5.

---

<div class="post-metadata">

**Author:** ![joelq](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joelq/32/445_2.png) [@joelq](https://discourse.elm-lang.org/u/joelq)\
**Post date:** [July 19, 2021, 2:24pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/6 "2021-07-19T14:24:58Z")

</div>

I love this visual showcasing all the bar-chart terminology. 💯 for friendly docs!

 ![bar-terminology](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/4/42676b9d521f00e19e876d8f04b6b9a8f8876903.png)

---

<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:** [July 20, 2021, 1:41am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/7 "2021-07-20T01:41:23Z")

</div>

Amazing work, thanks so much for doing this!

---

<div class="post-metadata">

**Author:** ![cbrake](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/cbrake/32/438_2.png) [@cbrake](https://discourse.elm-lang.org/u/cbrake)\
**Post date:** [July 20, 2021, 6:41pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/8 "2021-07-20T18:41:15Z")

</div>

Looks great! Does elm-charts supersede line-charts, or do you still recommend using line-charts?

---

<div class="post-metadata">

**Author:** ![sammarten](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sammarten/32/2344_2.png) [@sammarten](https://discourse.elm-lang.org/u/sammarten)\
**Post date:** [July 21, 2021, 1:13pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/9 "2021-07-21T13:13:40Z")

</div>

Very excited about this, thanks @terezka !

---

<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:** [July 22, 2021, 8:09am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/10 "2021-07-22T08:09:21Z")

</div>

It supersedes it! I’ll make a note of this on the line-charts lib 🙂

---

<div class="post-metadata">

**Author:** ![lucamug](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucamug/32/1764_2.png) [@lucamug](https://discourse.elm-lang.org/u/lucamug)\
**Post date:** [July 22, 2021, 8:34am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/11 "2021-07-22T08:34:24Z")

</div>

This is amazing work! Now I need to find excuses to add charts to all our apps

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [July 23, 2021, 10:56am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/12 "2021-07-23T10:56:01Z")

</div>

This looks great, I’ve been for waiting for this for a current project 🙂

One question, is there any way to control the y-axis ticks? Specifically I need to have the minimum value at the top, and the maximum value at the bottom - think sports league table where a dot or line should be right at the top if the team/player is 1st in the table, or right at the bottom if the team/player is bottom of the table.

I want to plot a line graph that displays the varying league positions throughout a season. My only issue is the y-axis.

EDIT: Just found the `generate` function to be used in conjunction with `yLabel` so it looks as if this is the way to go…

---

<div class="post-metadata">

**Author:** ![IloSophiep](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ilosophiep/32/3489_2.png) [@IloSophiep](https://discourse.elm-lang.org/u/IloSophiep)\
**Post date:** [July 24, 2021, 7:35pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/13 "2021-07-24T19:35:14Z")

</div>

First of all: Thanks for the awesome looking library! I recently wanted to do some charts for a private project but ended up not being sure what to use in Elm for that. Because it wasn’t that important i just went with some table display instead. Seeing this announcement made me go back and try it with some fancy charts!

My problem: I might be missing something real obvious, but i can’t seem to get the charts to respect the given amount of space? I have the elm app embeded:

```auto
<div id="elm-history-graph"></div>

```

and

```auto
main : Program String Model Msg
main =
    Browser.element

```

and stuff and i am just trying for starters to render it inside:

```auto
view _ =
    let
        data =
            [ ...
            ]

        content =
            C.chart
                [ CA.width 300
                ]
                [C.xLabels []
                , C.yLabels [CA.withGrid]
                , C.series .x
                    [C.interpolated .y [ CA.monotone] []
                    , C.interpolated .z [CA.monotone] []
                    ]
                    data
                ]
    in
    Html.div
        [Html.Attributes.style "width" "300px"]
        [content]

```

With most of the the charts stuff taking from [a github example](https://github.com/terezka/elm-charts/blob/2.0.0/docs/examples/LineCharts/Montone.elm). But the chart’s labels are rendering outside of their container. Is that normal?

---

<div class="post-metadata">

**Author:** ![razze](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/razze/32/1650_2.png) [@razze](https://discourse.elm-lang.org/u/razze)\
**Post date:** [July 26, 2021, 3:18am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/14 "2021-07-26T03:18:35Z")

</div>

I’ve hit the same problem on friday, so I would be interested in that too 🙂

---

<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:** [July 26, 2021, 10:26am UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/15 "2021-07-26T10:26:36Z")

</div>

You have to add a [`margin`](https://elm-charts.org/documentation/navigation/margin)! Let me know if that solves your problem. 😊

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [July 26, 2021, 1:47pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/16 "2021-07-26T13:47:19Z")

</div>

Here’s a few problems I’m having:

 ![Elm Charts](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/e/ec0fe004a671a9e655fb2a013b7fe212d7d35302.png)

1. No horizontal line at the top (might be related to 4).
2. Gap in the center of the chart.
3. X ticks/labels overflow when the data does not reference those values.
4. Extra `yTick` at the bottom of the chart.

Any pointers would be greatly appreciated 🙂

---

<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:** [July 26, 2021, 2:47pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/17 "2021-07-26T14:47:50Z")

</div>

Hi!

1. How are you producing your y labels? If you are not adding a label, there will not be a line either, unless you add it yourself.

2. It looks like you have some y ticks at x = 2, which makes it look like a gap. Could that be true?

3. How are you producing the x ticks? You can access the calculated min and max value with `withPlane <| \plane -> .. plane.x.min` etc. and use them only make ticks within your range. Alternatively, you can just add `overflow: hidden` style to your chart. I’ll put a clip path on them in a upcoming version, but it’s still cheaper for you to just not render them!

4. I can’t really tell what extra `yTick` you are referring to. Could you elaborate?

It would generally make it a lot easier to help you if you are able share some of the code! You can DM me if you need to. 🙂

PS. Unfortunately, I have no clue what a “sports league” table is 😬 Could you share a link to something like what you’d like to achieve?

---

<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:** [July 26, 2021, 5:05pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/18 "2021-07-26T17:05:00Z")

</div>

Just thought of something else which could be the root of your overflow x labels! I wonder if you accidentally used

`C.generate someAmount C.ints .y []`

instead of

`C.generate someAmount C.ints .x []`

that is, it is using the domain to produce the numbers you’re adding to the x-axis instead of the domain?

Just a shot in the dark!

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [July 26, 2021, 6:33pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/19 "2021-07-26T18:33:45Z")

</div>

> [@terezka](#):
>
> It would generally make it a lot easier to help you if you are able share some of the code! You can DM me if you need to. 🙂

Yes I know, sorry, I normally would - just thought something obvious might stand out.

I’ve fixed **1** and **4** - although, in the two ellies below, the charts look like they are missing a `yTick` and `yLabel` at the very bottom that should be `y = 21`. The vertical lines continue down past the final y tick (20) and its label.

1. The ‘gap’ in the center appears to be something you’re drawing on the chart to signify the middle, you can see it in both the ellies. Is it possible to remove this?

2. 

> [@terezka](#):
>
> How are you producing the x ticks? You can access the calculated min and max value with `withPlane <| \plane -> .. plane.x.min` etc. and use them only make ticks within your range. Alternatively, you can just add `overflow: hidden` style to your chart. I’ll put a clip path on them in a upcoming version, but it’s still cheaper for you to just not render them!

I’m producing the x ticks with the `generate` function. Even if the data doesn’t touch those values, I still need the x ticks and labels to be rendered - but within the chart area. Is this possible?

> [@terezka](#):
>
> PS. Unfortunately, I have no clue what a “sports league” table is 😬 Could you share a link to something like what you’d like to achieve?

No problem.

In a sports league with 20 teams where they all play each other twice, each team will each play a total of 38 matches in the season, and each team will occupy a position in the table which will be between 1 and 20 inclusive. Position 1 denotes the top team with the most points, position 20 denotes the bottom team with least points.

I need the chart to display the changing league positions as the season unfolds. So, I want the chart to always render x ticks from 0 - 38 within the chart area even if the data only includes the first 5 matches; 0 to 5 on the x axis.

It looks like the chart is being rendered around the limits of the data with the x axis scaling up accordingly, rather than the limits set by the generated ticks on the x axis - which is what I need.

This [ellie](https://ellie-app.com/dQtw5SDDMh7a1) shows the x and y values not respecting the chart height and width. The chart has no data, but I would have expected to be able to create an empty chart with the correct x and y ticks and labels.

This [ellie](https://ellie-app.com/dQvps9xfVnSa1) shows the x ticks and labels not respecting the chart width.

I’m probably missing something obvious… 🙂

---

<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:** [July 26, 2021, 7:16pm UTC](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563/20 "2021-07-26T19:16:01Z")

</div>

Super helpful context! I [edited your ellie](https://ellie-app.com/dQvQXJ7Zhqja1) to what I think is what you want.

Regarding the “gap”, the culprit was your `yTick` which defaults to being x = 0, but in your case I’m guessing you’d like to have it at your `x.max`? You can also remove the ticks entirely if you’d prefer. (see line 96-97)

Regarding the overflow labels, then you had the right idea using the `lowest`/`highest` api, except they should be applied to the range/domain itself, not just the axes, which are just visuals. This is done by adding the `range`/`domain` attributes as I did in the [updated ellie](https://ellie-app.com/dQvQXJ7Zhqja1) (see line 64-65). I can see how you confused the two! I think I will add a little FAQ to the site until I come up with a more intuitive api for this part.

Let me know if it still doesn’t solve your trouble!

[Next page](https://discourse.elm-lang.org/t/new-release-of-elm-charts/7563.md?page=2)