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.
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:
main : Program String Model Msg
and stuff and i am just trying for starters to render it inside:
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?
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?
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.
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!