Change cursor Line color - LightningChart

Question

I am creating cursor like below

var purple =  new SolidFill({ color: ColorHEX('#ab00f5') }); 

// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
    .setPointMarker(UIBackgrounds.Circle)
    .addStyler(marker => marker
        .setPointMarker(point => point
            .setSize({ x: 4, y: 4 })
            .setFillStyle(purple)

        )

    )
chart[1].addChartMarkerXY(SeriesMarkerBuilder)
            .setPosition({ x: 400, y: 0 }) .setGridStrokeYVisibility(UIVisibilityModes.whenDragged);

How do I change that White vertical line colour and thickness... also how to hide the label and show the label in top ?

Snekw · Accepted Answer

Label visibility

You can control when the labels are visible with ChartMarker.setTickMarkerXVisibility and ChartMarker.setTickMarkerYVisibility. UIVisibilityModes enum defines the possible visibility states. You can hide the label always with UIVisibilityModes.never and only show it when dragging with UIVisibilityModes.whenDragged see the UIVIsibilityModes documentation for all the possible visibility modes.

Label on top

Moving the label to top requires having an axis on top of the chart.

const topAxis = chart.addAxisX(true)
const area = chart.addAreaSeries({type: AreaSeriesTypes.Positive, xAxis: topAxis})
const marker = chart.addChartMarkerXY(builder, topAxis)

If you don't need the default x axis, you can remove it with chart.getDefaultAxisX().dispose(). If the default axis is removed and the top axis is the only x axis, then the xAxis parameter of addChartMarkerXY can be omitted.

Marker Grid Stroke Style

The style for the marker horizontal and vertical lines is defined by either adding a styler to the marker builder or by changing the style after the marker is created.

Adding a styler to builder

You can add styler to MarkerBuilders.XY with MarkerBuilders.XY.addStyler() method. The styler is a mutator function which receives the marker as the first parameter and expects a new marker to be returned from it. (marker) => marker You can style the marker with the methods of StaticCursorXY interface. To style the vertical line, you should style call StaticCursorXY.setGridStrokeXStyle() method and define the new stroke style. See the below code snippet for an example of styling.

const SeriesMarkerBuilder = MarkerBuilders.XY
    .addStyler(marker => marker
        .setGridStrokeXStyle(line =>
            line.setFillStyle(f =>
                f.setColor(ColorHEX('#f00'))
            )
            .setThickness(10)
        )
    )

Styling after creation

If you don't want to use the builder to style your chart marker you can use the methods of StaticCursorXY interface directly.

const marker = chart.addChartMarkerXY(MarkerBuilders.XY)
marker.setGridStrokeXStyle(line =>
    line.setFillStyle(f =>
            f.setColor(ColorHEX('#f00'))
        )
        .setThickness(1)
    )

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    AreaSeriesTypes,
    ColorPalettes,
    SolidFill,
    UIOrigins,
    UIElementBuilders,
    LegendBoxBuilders,
    UIButtonPictures,
    ColorHEX,
    MarkerBuilders,
    UIBackgrounds,
    UIVisibilityModes
} = lcjs

// ----- Cache styles -----
const palette = ColorPalettes.fullSpectrum(10)
const solidFills = [3, 0].map(palette).map(color => new SolidFill({ color }))
const opaqueFills = solidFills.map(fill => fill.setA(150))

// Create a XY Chart.
const chart = lightningChart()
    .ChartXY()
    .setPadding({ right: 2 })

const xAxis = chart.addAxisX(true)
chart.getDefaultAxisX().dispose()

// ---- Add multiple Area series with different baselines and direction. ----
// Create semi-transparent red area to draw points above the baseline.
const areaProfit = chart.addAreaSeries({ type: AreaSeriesTypes.Positive, xAxis })
    .setFillStyle(opaqueFills[0])
    .setStrokeStyle(stroke => stroke.setFillStyle(solidFills[0]))

// Create semi-transparent orange area to draw points below the baseline.
const areaExpense = chart.addAreaSeries({ type: AreaSeriesTypes.Negative, xAxis })
    .setFillStyle(opaqueFills[1])
    .setStrokeStyle(stroke => stroke.setFillStyle(solidFills[1]))

const profitData = [
    { x: 0, y: 0 },
    { x: 10, y: 21 },
    { x: 20, y: 59 },
    { x: 30, y: 62 },
    { x: 40, y: 78 },
    { x: 50, y: 85 },
    { x: 60, y: 95 },
    { x: 70, y: 98 },
    { x: 80, y: 103 },
    { x: 90, y: 110 },
    { x: 100, y: 112 },
    { x: 110, y: 126 },
    { x: 120, y: 132 },
    { x: 130, y: 170 },
    { x: 140, y: 172 },
    { x: 150, y: 202 },
    { x: 160, y: 228 },
    { x: 170, y: 267 },
    { x: 180, y: 300 },
    { x: 190, y: 310 },
    { x: 200, y: 320 },
    { x: 210, y: 329 },
    { x: 220, y: 336 },
    { x: 230, y: 338 },
    { x: 240, y: 343 },
    { x: 250, y: 352 },
    { x: 260, y: 355 },
    { x: 270, y: 390 },
    { x: 280, y: 392 },
    { x: 290, y: 418 },
    { x: 300, y: 421 },
    { x: 310, y: 430 },
    { x: 320, y: 434 },
    { x: 330, y: 468 },
    { x: 340, y: 472 },
    { x: 350, y: 474 },
    { x: 360, y: 480 },
    { x: 370, y: 506 },
    { x: 380, y: 545 },
    { x: 390, y: 548 },
    { x: 400, y: 552 },
    { x: 410, y: 584 },
    { x: 420, y: 612 },
    { x: 430, y: 619 },
    { x: 440, y: 627 },
    { x: 450, y: 657 },
    { x: 460, y: 669 },
    { x: 470, y: 673 },
    { x: 480, y: 695 },
    { x: 490, y: 702 },
    { x: 500, y: 710 }
]
const expensesData = [
    { x: 0, y: 0 },
    { x: 10, y: -58 },
    { x: 20, y: -61 },
    { x: 30, y: -62 },
    { x: 40, y: -66 },
    { x: 50, y: -88 },
    { x: 60, y: -93 },
    { x: 70, y: -124 },
    { x: 80, y: -126 },
    { x: 90, y: -136 },
    { x: 100, y: -152 },
    { x: 110, y: -156 },
    { x: 120, y: -190 },
    { x: 130, y: -199 },
    { x: 140, y: -200 },
    { x: 150, y: -208 },
    { x: 160, y: -210 },
    { x: 170, y: -235 },
    { x: 180, y: -270 },
    { x: 190, y: -299 },
    { x: 200, y: -321 },
    { x: 210, y: -342 },
    { x: 220, y: -350 },
    { x: 230, y: -360 },
    { x: 240, y: -374 },
    { x: 250, y: -413 },
    { x: 260, y: -433 },
    { x: 270, y: -447 },
    { x: 280, y: -449 },
    { x: 290, y: -454 },
    { x: 300, y: -461 },
    { x: 310, y: -461 },
    { x: 320, y: -492 },
    { x: 330, y: -496 },
    { x: 340, y: -518 },
    { x: 350, y: -522 },
    { x: 360, y: -557 },
    { x: 370, y: -562 },
    { x: 380, y: -596 },
    { x: 390, y: -599 },
    { x: 400, y: -609 },
    { x: 410, y: -611 },
    { x: 420, y: -628 },
    { x: 430, y: -635 },
    { x: 440, y: -636 },
    { x: 450, y: -643 },
    { x: 460, y: -643 },
    { x: 470, y: -647 },
    { x: 480, y: -648 },
    { x: 490, y: -659 },
    { x: 500, y: -665 }
]

profitData.forEach((point) => { areaProfit.add(point) })
expensesData.forEach((point) => { areaExpense.add(point) })

var purple = new SolidFill({ color: ColorHEX('#ab00f5') });

// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
    .setPointMarker(UIBackgrounds.Circle)
    .addStyler(marker => marker
        .setPointMarker(point => point
            .setSize({ x: 4, y: 4 })
            .setFillStyle(purple)
        )
        .setGridStrokeXStyle(line =>
            line.setFillStyle(f =>
                f.setColor(ColorHEX('#f00'))
            )
            .setThickness(10)
        )
    )
const marker = chart.addChartMarkerXY(SeriesMarkerBuilder)
    .setPosition({ x: 400, y: 0 })
    .setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
    .setTickMarkerYVisibility(UIVisibilityModes.whenDragged)