terezka/elm-charts

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

Opened this issue · 0 comments

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?