New release of elm-charts!

Hi everyone,

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

  • :wave: Great support for interactivity
  • πŸ‘―β€β™€οΈ Mixed chart types
  • :heavy_heart_exclamation: Easily add irregular details
  • :framed_picture: Tons of examples

Check it out at elm-charts.org!

Thanks to everyone who gave me feedback on the library :heart:

47 Likes

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

3 Likes

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:

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):

3 Likes

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

1 Like

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.

1 Like

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

13 Likes

Amazing work, thanks so much for doing this!

1 Like

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

1 Like

Very excited about this, thanks @terezka !

1 Like

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

1 Like

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

2 Likes

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

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…

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:

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

and

main : Program String Model Msg
main =
    Browser.element

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

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. But the chart’s labels are rendering outside of their container. Is that normal?