Search code examples
javascriptreactjstypescriptlightningchart

Swap AxisX and AxisY using Lightningchart library

I'm using lightningchart library and would like to create a ChartXY with an AreaSeries attach to it. To do so I write this code using React and TypeScript :

import { useEffect, useRef } from 'react';

import {
    lightningChart,
    ChartXY,
    Dashboard,
    emptyFill,
    AreaSeries,
    AreaSeriesTypes
} from "@arction/lcjs";

import './ChartTest.scss';


const ChartTest = () => {
    const chartRef = useRef(null);
    
    const dashboard = useRef<Dashboard|null>(null);
    const scallingChart2 = useRef<ChartXY|null>(null);
    const scallingChart2Serie = useRef<AreaSeries|null>(null);

    const initializeDashboard = (container:HTMLDivElement) => {
        const dashboard = lightningChart()
            .Dashboard({
                numberOfColumns: 1,
                numberOfRows: 1,
                container: container
            })
            .setRowHeight(0, 3)
            .setRowHeight(1, 1)
            .setColumnWidth(0,12)
            .setColumnWidth(1,1);

        return dashboard;
    }

    const initializeScallingChart = (dashboard:Dashboard) => {
        const chart = dashboard.createChartXY({
            columnIndex: 0,
            rowIndex: 0
        })
        .setTitleFillStyle(emptyFill)
        .setTitleMargin({ top: 0, bottom: 0 })
        .setPadding(0)

        return chart;
    }

    const renderScalingChart = (chart:ChartXY) => {
        const series = chart
            .addAreaSeries({
                type: AreaSeriesTypes.Bipolar,
            })

        for (let i=0; i<100; i++) {
            series.add({ y: Math.floor(Math.random() * 20) - 10, x: i })
        }

        return series;
    }

    useEffect(() => {
        if (chartRef.current) {
            dashboard.current = initializeDashboard(chartRef.current);

            scallingChart2.current = initializeScallingChart(dashboard.current);

            scallingChart2Serie.current = renderScalingChart(scallingChart2.current);
        }
        
        return () => {
            if (dashboard.current) {
                dashboard.current.dispose();
            }
        }
    }, []);


    return (
        <div className='chart-test' ref={chartRef} ></div>
    );
}

export default ChartTest;

This part work well and give me this result: enter image description here

But from there I wanna rotate the chart 90deg to put it verticaly. So when I add points to the AreaSerie I change the x and y :

for (let i=0; i<100; i++) {
    series.add({ x: Math.floor(Math.random() * 20) - 10, y: i })
}

But got this result : enter image description here

It's normal because I didn't tell Lightningchart to draw under the y axis instead of the x axis. However I don't see any option to do so. I try to swap the x and y axis on creation of my AreaSerie but got nothing:

const series = chart
    .addAreaSeries({
        type: AreaSeriesTypes.Bipolar,
        yAxis: chart.addAxisX(),
        xAxis: chart.addAxisY()
    })

I also check the different options for createChartXY and thought I was near the solution with the defaultAxisY axis option. But It's only possible to set the axis to the oposite of the chart and not swaping with the other axis.

Any other idea is welcome.

Solution

  • Currently, LightningChart JS AreaSeries does not support vertical mode.

    This feature will be added in the near future (either next release or the one after that).

    LineSeries support vertical mode already. For example: https://lightningchart.com/js-charts/interactive-examples/examples/lcjs-example-0504-dashboard2chs1000pps.html