Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chart doesn't show up in Chrome w/ elm-ui #129

Open
juliusl opened this issue Jun 23, 2024 · 0 comments
Open

Chart doesn't show up in Chrome w/ elm-ui #129

juliusl opened this issue Jun 23, 2024 · 0 comments

Comments

@juliusl
Copy link

juliusl commented Jun 23, 2024

For some reason, if the height/width aren't set on the svg or svg's container element in chrome, the chart won't render.

Ex:

view : Model -> Browser.Document Msg
view model =
    { title = "Example"
    , body =
        [ 
            Element.layout [ width fill, height fill ] <|
            column [ width fill, height fill, padding 50 ]
                [ Element.row [ width fill, height fill ]
                    [ Element.html drawChart
                    ]
                ]
        ]
    }


drawChart =
    C.chart
        [ CA.height 300
        , CA.width 1500
        , CA.padding { top = 0, bottom = 0, left = 15, right = 15 }
       -- Uncomment to fix , CA.attrs [ SA.width "1080px", SA.height "1920px" ] 
        ]
        [ C.xLabels [ CA.withGrid ]
        , C.series .offset
            [ C.scatter .length
                [ CA.square
                , CA.highlight 0.4
                ]
            ]
            data
        , C.withPlane <|
            \p ->
                [ C.rect
                    [ CA.x1 0.0
                    , CA.y1 75.0
                    , CA.x2 130.0
                    , CA.y2 25.0
                    , CA.color "rgb(210, 210, 210)"
                    , CA.opacity 0.3
                    ]
                ]
        ]

image

When you comment out the line above for the SVG attributes the chart is visible again.

image

I have a feeling I'm missing something in the elm-ui part maybe?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant