CODEWITHSUNDEEP
lightningchart
Gracie williams
Gracie williams

Reputation: 1145

Change lightningChart Title Size and color

I am adding chart title size with below code

const _chartVolumeTitle = charts[0].addUIElement(
        UIElementBuilders.TextBox
            .setBackground(UIBackgrounds.Rectangle),
        {
            x: axisX.scale,
            y: axisY.scale
        }
    )
        .setText('Test Title')
        .setPosition({ x: 0, y: 0 })
        .setOrigin(UIOrigins.LeftTop)
        .setDraggingMode(UIDraggingModes.notDraggable)

How do I change font size ,font colour and background colour.

Upvotes: 0

Views: 637

Answers (1)

Snekw
Snekw

Reputation: 2620

You can change the font size of a UI Textbox with

textBox
    .setFont((font) => font
        .setSize(40)
    )

The .setFont method can accept either a new FontSettings instance or a mutator function. The mutator function can be used to edit the existing font settings.

.setSize .setFont

Font color can be changed with textBox.setTextFillStyle.

textBox
    .setTextFillStyle((style) => style
        .setColor(ColorHEX('#0f0'))
    )

TextBox background color can be changed with textBox.setBackground. In most cases you will need to create a new SolidFill to style the background fill and stroke styles as the Text box by default uses a emptyFill.

textBox
    .setBackground(style => style
        .setFillStyle(new SolidFill({ color: ColorHEX('#f00') }))
    )

See the code snippet below to see the results of different uses of these APIs.

const {
    lightningChart,
    emptyLine,
    SolidFill,
    ColorHEX,
    UIElementBuilders,
    UIBackgrounds,
    UIOrigins,
    UIDraggingModes,
    SolidLine
} = lcjs

const chart = lightningChart()
    .ChartXY()

chart
    .setTitle('Title')
    .setTitleFont(f => f
        .setSize(24)
    )
    .setTitleFillStyle(new SolidFill({ color: ColorHEX('#f00') }))

const title = chart.addUIElement(
    UIElementBuilders.TextBox
        .setBackground(UIBackgrounds.Rectangle),
    {
        x: chart.getDefaultAxisX().scale,
        y: chart.getDefaultAxisY().scale
    }
)
    .setText('Test Title')
    .setPosition({ x: 0, y: 0 })
    .setOrigin(UIOrigins.LeftTop)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setFont((font) => font
        .setSize(40)
    )
    .setBackground(style => style
        .setFillStyle(new SolidFill({ color: ColorHEX('#f00') }))
    )
    .setTextFillStyle((style) => style
        .setColor(ColorHEX('#0f0'))
    )


const title2 = chart.addUIElement(
    UIElementBuilders.TextBox
        .setBackground(UIBackgrounds.Rectangle),
    chart.uiScale
)
    .setText('Test Title')
    .setPosition({ x: 50, y: 50 })
    .setOrigin(UIOrigins.Center)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setFont((font) => font
        .setSize(40)
    )
    .setBackground(style => style
        .setStrokeStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX('#f00') }) }))
    )
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 1

Related Questions