Plot.Bars

Attributes to alter the view of the bars.

myBarsSerie : Plot.Element (Interaction YourMsg)
myBarsSerie =
    bars
        [ Bars.maxBarWidthPer 85
        , Bars.stackByY
        , Bars.label
            [ Label.formatFromList [ "A", "B", "C" ] ]
        ]
        [ [ Bars.fill "blue", Bars.opacity 0.5 ]
        , [ Bars.fill "red" ]
        ]
        (Bars.toBarData
            { yValues = .revenueByYear
            , xValue = Just .quarter
            }
            [ { quarter = 1, revenueByYear = [ 10000, 30000, 20000 ] }
            , { quarter = 2, revenueByYear = [ 20000, 10000, 40000 ] }
            , { quarter = 3, revenueByYear = [ 40000, 20000, 10000 ] }
            , { quarter = 4, revenueByYear = [ 40000, 50000, 20000 ] }
            ]
        )

Definition

type alias Attribute msg =

Config msg -> Config msg

Attributes

maxBarWidth : Int -> Attribute msg

Set a fixed max width (in pixels) on your bars.

maxBarWidthPer : Int -> Attribute msg

Set a relative max width (in percentage) your bars.

stackByY : Attribute msg

By default your bars are stacked by x. If you want to stack them y, add this attribute.

Labels

type alias LabelInfo =

{ index : Int

, xValue : Value

, yValue : Value

}

The info your label format option will be passed.

label : List (Attribute LabelInfo msg) -> Attribute msg

Alter the view of your label.

myBarSeries : Plot.Element msg
myBarSeries =
  bars
      [ Bars.label
          [ Label.classes [ "label-class" ]
          , Label.displace ( 12, 0 )
          ]
      ]
      barStyles
      data

Individual bar attributes

These are the attributes which can be passed in the list of bar styles in the second argument of your series.

myBarsSerie : Plot.Element msg
myBarsSerie =
    bars
        []
        [ [ Bars.fill "blue", Bars.opacity 0.5 ]
        , [ Bars.fill "red" ]
        ]
        data

type alias StyleAttribute msg =

StyleConfig msg -> StyleConfig msg

fill : String -> StyleAttribute msg

Set the fill color.

opacity : Float -> StyleAttribute msg

Set the opacity.

customAttrs : List (Attribute msg) -> StyleAttribute msg

Add your own attributes. For events, see this example

Custom data

type alias Data =

Group

The data format the bars element requires.

type alias DataTransformers data =

{ yValues : data -> List Value

, xValue : Maybe (data -> Value)

}

The functions necessary to transform your data into the format the plot requires. If you provide the xValue with Nothing, the bars xValues will just be the index of the bar in the list.

toBarData : DataTransformers data -> List data -> List Data

This function can be used to transform your own data format into something the plot can understand.

Bars.toBarData
    { yValues = .revenueByYear
    , xValue = Just .quarter
    }
    [ { quarter = 1, revenueByYear = [ 10000, 30000, 20000 ] }
    , { quarter = 2, revenueByYear = [ 20000, 10000, 40000 ] }
    , { quarter = 3, revenueByYear = [ 40000, 20000, 10000 ] }
    , { quarter = 4, revenueByYear = [ 40000, 50000, 20000 ] }
    ]

terezka/elm-plot/4.0.0