Search code examples
lightningchart

Styling a marker in LightningChart JS

I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different: (using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)

        Markers.map((marker) => {
        const chartMarker = chart.addChartMarkerXY()
            .setPosition({ x: new Date(marker.x) - startDate, y: marker.y });

            chartMarker
            .setResultTableVisibility(UIVisibilityModes.always)
            .setResultTable((table) => table
                .setContent([
                    ['Type']
                ])
            )
            .setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
            .setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
            .setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
            .setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
            .setDraggingMode(UIDraggingModes.notDraggable)
            .setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.

        console.log("style", chartMarker.getGridStrokeXStyle());
    });
Solution

  • The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.

    I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:

    enter image description here

    As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.

    .setGridStrokeXVisibility(UIVisibilityModes.whenDragged)

    Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.

    .setDraggingMode(UIDraggingModes.notDraggable)

    Here are some examples of styling different parts of the Chart Marker properly:

    enter image description here