Title alignment

[bvenn]

Description

When defaults are applied the title is left aligned. To center the title the layout must be modified, which is not straight forward to do. It would be easier to set the alignment at Chart.withTitle

Chart.Point([1,2])
|> Chart.withTitle "Title1"
|> Chart.show


Chart.Point([1,2])
|> Chart.withLayout(
    Layout.init(
        Title=Title.init("Title2",X=0.5)
        )
    )
|> Chart.show

Solution

Add the X position option to Chart.withTitle. To clarify the usage, an Alignment type (center, left, right) would be beneficial, but eventually would break the Plotly.NET standards. Other Title options like Standoff, Side, and Y could be added as well.

static member withTitle(title, [<Optional; DefaultParameterValue(null)>] ?X, [<Optional; DefaultParameterValue(null)>] ?TitleFont) =
    (fun (ch: GenericChart) ->
        let layout =
            Layout() |> Layout.style (Title = Title.init (Text = title, ?X = X, ?Font = TitleFont))
        GenericChart.addLayout layout ch)

Question

I'm not sure what the Side is for when dealing with Titles. I tried some sides, but the title position did not change. Does it correspond to layout-title-pad?

HTML for Title=Title.init("Title2",Side=Side.Bottom):
"title":{"text":"Title2","side":{"Case":"Bottom"}}

[kMutagene]

the Side attribute works only in some places (title object is used in many other places than the layout title). But in this case it looks more like the conversion is wrong: "side":{"Case":"Bottom"} is an incorrect conversion from a union case.

in general, an overload for Chart.withTitle that uses a Title object as input should solve the rest of this issue.

[kMutagene]

Regarding side, the error is here:

Plotly.NET/src/Plotly.NET/CommonAbstractions/Title.fs

Line 35 in 7a8a56f

Side |> DynObj.setValueOpt title "side"

this must use StyleParam.Side.convert in attribute assignment, but sets the DU directly

[bvenn]

The Side attribute is only used in Legend to position the legend title.

[
Chart.Point [(1,2)]
Chart.Point [(2,1)]
]
|> Chart.combine
|> Chart.withLegend(Legend.init(Title=Title.init("Top",Side=StyleParam.Side.Top)))
|> Chart.show

From the docs there are three possibilities:

1. "left"
2. "top"
3. "top left"

Problem

1. Legend.init only works for Title: string, so this has to be changed to Title: Title.
2. Because StyleParam.Side only supports "left", "right", "top", and "bottom", the "top left" case was modified within the html file. StyleParam.Right and StyleParam.Bottom has no effect for legend titles. Should StyleParam.Side be extended with "top left"?