terezka / elm-charts

Create SVG charts in Elm.
https://www.elm-charts.org
BSD 3-Clause "New" or "Revised" License
698 stars 67 forks source link

Unable to make grid/ticks appear at 0, 6, 12, 18, 24 on graph of domain [0, 24] #121

Open vistuleB opened 1 year ago

vistuleB commented 1 year ago

This was referenced in issue 120. Separating from that issue for clarity.

Desired behavior: obtain ticks & labels & grid lines at 0, 6, 12, 18, 24.

Current behavior: ticks & labels & grid lines appear at 0, 5, 10, 15, 20.

module Main exposing (..)

import Browser
import Chart as C
import Chart.Attributes as CA
import Html exposing (Html, div)
import Html.Attributes exposing (style)

type alias Model =
    {}

type Msg
    = Msg

main : Program () Model Msg
main =
    Browser.element
        { init = init
        , update = update
        , subscriptions = \_ -> Sub.none
        , view = view
        }

init : () -> ( Model, Cmd Msg )
init _ =
    ( {}, Cmd.none )

update : Msg -> Model -> ( Model, Cmd Msg )
update _ model =
    ( model, Cmd.none )

view : Model -> Html Msg
view _ =
    let
        data =
            [ { x = 0, y = 0 }
            , { x = 24, y = 10 }
            ]
    in
    div
        [ style "width" "300px"
        , style "height" "300px"
        , style "padding" "50px"
        ]
        [ C.chart
            [ CA.height 300
            , CA.width 300
            ]
            [ C.xLabels
                [ CA.withGrid
                , CA.amount 5
                ]
            , C.yLabels
                [ CA.withGrid ]
            , C.series .x [ C.scatter .y [] ] data
            ]
        ]
vistuleB commented 1 year ago

Sidenote: The semantics of "domain" and "range" seem to be inverted in elm-charts compared to their common usage in math. Usually "domain" is associated with the horizontal axis, or with "the set of inputs", while "range" is associated with the vertical axis, or "set of outputs".