Display x-axis labels without padding

[abingham]

I can't find a way to display the x-axis labels without using padding to my plot call. The function seems to automatically make space for the y-axis labels, but have to explicitly account for the x-axis.

This isn't too bad, except that when I request padding I get an unnecessary extension of the y-axis down through the "0" of my x-axis.

For reference, here's how it looks without padding:

And here it is with padding:

Is there some more correct way to do properly display the x-axis labels?

[terezka]

Riiight. Ok, so I could theoretically calculate the amount of space the tick would take up under the x-axis / left of the y-axis and let the library add the appropriate space on the sides, however I can think of quite a few cases where it would be imprecise and barely possible. I'll give it some thought though!

Until then, you should be able to add the appropriate padding with plotStyle. Like this:

chart =
    plot [ plotStyle [ ( "padding", "*your padding*px" ) ] ] [ ... ]

The difference between adding padding with the padding property and with plotStyle is that the padding prolongs the span of the axis, while plotStyle just adds css padding to the

However, the first example you show should really not be cutting off the the y-axis at 0.1, so would you mind providing me with the code snippet? There might be a bug after all!

Thanks for writing!

[abingham]

Here's a link to the in situ code that I'm working with. It's not a properly minimized snippet, but perhaps you'll see what's going on easily enough. This version has the padding, but the no-padding version is the same code minus the padding call.

FWIW, I briefly tried using the plotStyle padding technique you mentioned, but it didn't seem to work. I'm not entirely sure what it did, but it seemed to add padding to just the top and left, not the bottom (where I need it).

[terezka]

Mmh, not quite sure what you did, but when I change your plot with the following code:

-- Seem to be a little overkill to setup everything, so used this data to 
-- approximate the scenario shown in your example.
testData =
    [ (0, 0.1), (1, 0.4), (2, 0.8), (275, 1.8) ]

renderPlot : Model -> Html Msg
renderPlot model =
    let
        datasets =
            simulationData model

        dataPlots =
            List.map2
                (\dataset color ->
                    area [ areaStyle [ ( "fill-opacity", "0.5" ), ( "fill", color ), ( "stroke", color ) ] ] dataset
                )
                [ testData ] -- look here
                distinctColorStrings
    in
        plot
            [ plotStyle [ ( "padding", "40px" ), ( "stroke", "#000" ) ] ] -- look here
            ([ yAxis [ axisLineStyle [ ( "stroke", "#b9b9b9" ) ] ]
             , xAxis [ axisLineStyle [ ( "stroke", "#b9b9b9" ) ] ]
             ]
                ++ dataPlots
            )

I results in this:

Is this not what you get/need? Maybe it's the data which makes all the difference?

[mbylstra]

I had this same issue in http://elmalytics.xyz/. I even forked it and hacked at the source to try to get it to work. The funny thing was, at some point I reverted back to the official version, and it just magically started working again. It must have been some combination of padding I had changed which had fixed things without me realising.

Maybe the issue is not so much that it's not possible to get the y axis to not extend past zero, but more that it's not very clear how to achieve this. Perhaps, if all the X or Y data is all greater than zero, by default the axis should stop at zero, regardless of how much padding is set?

BTW, I really enjoyed using this library. In particular, making custom labels (such as the Years & Months) was a real breeze. I remember this kind of customisation being a nightmare in older JQuery based chart libraries. Great API!

[terezka]

Mmh, well, the idea was that you should not add padding on your plot if you don't want to prolong the extra space on the top/bottom and this it why the padding defaults to (0, 0). However, there is obviously a bug somewhere - if you see it again, please let me know! I can't seem to reproduce it.

For extra clarification:

chart =
  plot [ padding ( 20, 30 ) ] [ ... ]

will create a plot which prolongs the y-axis beyond the lowest point of your series by 20px and beyond the highest point by 30px.

chart =
  plot [ plotStyling ( "padding", "40px" ) ] [ ... ]

will create a plot with 40px of regular css padding on the top svg element. Useful when the plot cuts off your ticks, because it can't calculate how large they are.

I'll update the docs with this!

@abingham: If you still have the bug, then maybe try send me the data you used? Seems to be the only difference. I'll be updating this library to 0.18 as soon as one of my dependencies do, but then you can just export me your debugging trace. (Omg, this will be a different world)

@mbylstra: Thanks! It was exactly the customisation of labels and ticks which always bothered me too, so I was very focused on improving that with this api. Glad it worked out! I just published a new version, which makes it even easier, if you're still doing standard line/text styled ticks!

[jwillem]

There even is a bug in Firefox, related to the padding.. I don't know a fix yet, but the tick-labels are not displayed.

Chrome:

FF:

[terezka]

@jwillem It's fixed and will be out with the next release! :)

[jwillem]

👌👌👌

[terezka]

This should be fixed in v3.0.0 by the use of the margin attribute! Let me know if you you have any additional trouble!

[jwillem]

N1 Thanks! 🕶

On 20 Dec 2016, at 17:29, Tereza Sokol notifications@github.com wrote:

This should be fixed in v3.0.0 by the use of the margin attribute! Let me know if you you have any anditional trouble!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.