CODEWITHSUNDEEP
lightningchart
Gracie williams
Gracie williams

Reputation: 1145

Reduce custom tick font size and change color

I am adding custom tick like below

 axisX3.addCustomTick()
    .setGridStrokeLength(0)
    .setTextFormatter(()=> ttstr[0]+":"+ttstr[1])
    .setValue(xVal);

enter image description here

  1. How do I change font size / color
  2. change border color / style
  3. remove the rectangle around the ticks and just show the pointer in top.

I tried

 .setTitleFont(f => f
        .setSize(24)
    )

But not working

Upvotes: 0

Views: 226

Answers (1)

Snekw
Snekw

Reputation: 2620

You can edit the visual style of the created tick with customTick.setMarker() method. This method takes a mutator function as the first and only argument.

To change the font size:

const tick = axisX.addCustomTick()
    .setMarker(marker => marker
        .setFont(font => font
            .setSize(40)
        )
    )

To style the border:

const tick = axisX.addCustomTick()
    .setMarker(marker => marker
        .setBackground(background => background
            .setStrokeStyle((line) => line
                .setFillStyle(style => style
                    .setColor(ColorHEX('#f00'))
                )
            )
        )
    )

Showing just the pointer is not possible.

See below for a snippet of styling the tick.

const {
    lightningChart,
    emptyLine,
    ColorHEX,
} = lcjs

const chart = lightningChart().ChartXY()

const axisX = chart.getDefaultAxisX()

const tick = axisX.addCustomTick()
    .setMarker(marker => marker
        .setFont(font => font
            .setSize(40)
        )
        .setBackground(background => background
            .setStrokeStyle((line) => line
                .setFillStyle(style => style
                    .setColor(ColorHEX('#f00'))
                )
            )
        )
    )
    .setValue(4)
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>

Upvotes: 4

Related Questions