Hi everyone,
I released a new version of elm-charts today! Features include:
Great support for interactivity
Easily add irregular details
Tons of examplesCheck it out at elm-charts.org!
Thanks to everyone who gave me feedback on the library 
Amazing, thank you! The site is beautiful and the API looks really good, I will enjoy exploring this!
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):
Thank you for the feedback! I think I fix both issues now. 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.
Amazing work, thanks so much for doing this!
Looks great! Does elm-charts supersede line-charts, or do you still recommend using line-charts?
It supersedes it! I’ll make a note of this on the line-charts lib 
This is amazing work! Now I need to find excuses to add charts to all our apps
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…
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:
for friendly docs!
<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?
I’ve hit the same problem on friday, so I would be interested in that too
Here’s a few problems I’m having:
yTick at the bottom of the chart.Any pointers would be greatly appreciated
Hi!
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.
It looks like you have some y ticks at x = 2, which makes it look like a gap. Could that be true?
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 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?
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!
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.
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?
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?
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 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 shows the x ticks and labels not respecting the chart width.
I’m probably missing something obvious… 
Super helpful context! I edited your ellie 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 (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!