Search code examples
javascriptchartsline-breakslightningchart

LightningChartJs - add breaks to line chart for x axis

I would like to display breaks in the x axis of the line chart and display them with a fixed width, like at the image below:

chart break

Found this nice article that describes the functionality:

https://www.arction.com/news/using-scale-breaks-data-visualization/

If I understand correctly, there is the possibility in the SDK to display these with scaleAreas or even better with ClipAreas. But I could not find this possibility in the LightningChart JS framework.

As starting point I was able to generate breaks in data with a NaN value and added a Textbox.

So my questions are:

1. How to add breaks and fit to predefined width in xaxis

2. How to rotate the Textbox 90 degrees?

Help would be greatly appreciated.

Thanks in advance. :o)

// Extract required parts from LightningChartJS.
    const {
        lightningChart,
        AxisTickStrategies,
        DataPatterns,
        emptyFill,
        ColorHEX,
        emptyLine,
        UIElementBuilders,
        UIBackgrounds,
        UIOrigins,
        UIDraggingModes,
        SolidLine,
        SolidFill
    } = lcjs
    
    // Create a XY Chart.
    const dateOrigin = new Date(2020, 0, 1)
    const chart = lightningChart().ChartXY({
        defaultAxisXTickStrategy: AxisTickStrategies.DateTime(
            dateOrigin
        )
    })
        .setTitle('Demo')
    
    chart.setPadding({ right: '1' })
    
    // Add a progressive line series.
    // Using the DataPatterns object to select the horizontalProgressive pattern for the line series.
    const lineSeries = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
        .setName('Demo')
    
    // Generate some points using for each month
    const dataFrequency = 10;
    
    // Setup view nicely.
    chart.getDefaultAxisY()
        .setScrollStrategy(undefined)
        .setInterval(-20, 120)
        .setTitle('Demo y')
    
    // Data for the plotting
    
    const data = [];
    
    for (let i = 0; i < 1500; i++) {
    
      let index = i;
    
        if (i === 500) {
            index = NaN;
        }
        
        if (i > 500) {
            index = i + 1000;
        }
    
    
        data.push({
            x: index,
            y: Math.floor(Math.random() * 100)
        });
    }
    
    chart.addUIElement(
    UIElementBuilders.TextBox
        .setBackground(UIBackgrounds.Rectangle),
    chart.uiScale
)
    .setText('Break')
    .setPosition({ x: 45, y: 50 })
    .setOrigin(UIOrigins.Center)
    .setDraggingMode(UIDraggingModes.notDraggable)
    .setFont((font) => font
        .setSize(40)
    )
    .setBackground(style => style
        .setFillStyle(new SolidFill({ color: ColorHEX('#f00') }))
    )
    .setTextFillStyle((style) => style
        .setColor(ColorHEX('#0f0'))
    )
    
    
    // Adding points to the series
    lineSeries.add(data.map((point) => ({ x: point.x * dataFrequency, y: point.y })))
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>

Solution

  • LightningChart JS doesn't have support for scale breaks yet. It's something that will most likely be developed at some point but there is no timeline for it yet.

    TextBox rotation is not yet possible for UITextBox, it's coming in a future release but not the next release.