Display points fitted to x Axis

I´m trying to add an array of points to a chartXY but the chart isn´t properly drawn. The Y Values appears well fitted to Axis but x values aren't. The series appears in the middle of the chart like a line.

The code that generates the chart and adds points is the next below:

this.chart1 = lightningChart().ChartXY({ containerId: this.chartId1, defaultAxisXTickStrategy: AxisTickStrategies.Numeric })
        .setBackgroundFillStyle(new SolidFill({color: ColorHEX( '#C6C2C1' )}))
        .setChartBackgroundFillStyle(new SolidFill({color: ColorHEX( '#FFFFFF' )}))
        .setTitle('LightningCharts 1')
        .setTitleFillStyle(new SolidFill({color: ColorHEX( '#000000' )}));
// Fijo las propiedades del eje y
this.chart1.getDefaultAxisY()
    .setTitle('mV')
    .setScrollStrategy(AxisScrollStrategies.fitting)
    .setAnimationScroll(false)
    .fit(true)
    .setAnimationZoom(undefined)
    .setTitleFillStyle(new SolidFill({color: ColorHEX( '#000000' )}))
    .setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000')}), tickLength: 20 }));

// Fijo las propiedades del eje x
this.chart1.getDefaultAxisX()
    .setTitle('milliseconds')
    .setScrollStrategy(AxisScrollStrategies.fitting)
    .setAnimationScroll(false)
    .fit(true)
    .setAnimationZoom(undefined)
    .setTitleFillStyle(new SolidFill({color: ColorHEX( '#000000' )}))
    .setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000')}) }));
// Añado las series al chart
// tslint:disable-next-line:max-line-length
this.lineSeries1 = this.chart1.addPointLineSeries({ dataPattern: DataPatterns.horizontalProgressive, xAxis: this.chart1.getDefaultAxisX() })
    .setName('Serie 1')
    .setStrokeStyle( new SolidLine({
      thickness: 2,
      fillStyle: new SolidFill({ color: ColorHEX( '#E72B1C' ) })
    }))
    .setMouseInteractions(false);


this.lineSeries1.add(this.points);

And the array of points I´m generating with this code:

this.points = [];
// const sign = Math.floor(Math.random() * (1 + 1)) === 0 ? -1 : 1;
const firstX = Date.now();
for (let i = 0; i < 4000; i++) {
  const point = {
    x: firstX + (i * 1000),
    y: Math.floor(Math.random() * (5000 + 1))
  };
  this.points.push(point);
}

How can I see data fitted in the x Axis?

Solution

LightningChart JS currently can't support such large numbers on the Axis well. There is a limit on the axis interval when working with large numbers.

You can work around this issue by starting the X axis values from 0 or by editing the Numeric axis tick strategy.

Editing the tick strategy is not well supported and will change in future but for now it can be done.

First you need to ensure that the chart is created with a copy of the Numeric AxisTickStrategy.

const chart1 = ChartXY({
    defaultAxisXTickStrategy: Object.assign({}, AxisTickStrategies.Numeric)
})

The Object.assign is the key here. This will create a copy of the Numeric axis tick strategy.

Now that the chart has been created, it is possible to edit the tick strategy.

chart1.getDefaultAxisX().tickStrategy.formatValue = (value, range) => {
    return (offset + value).toFixed(0)
}

With this code an offset is added to the displayed values. This offset shouldn't exist in the data itself, it's only added when the data is displayed. The formatValue function is called always when the data is displayed by LightningChart JS.

See the code snippet below for a full implementation.

const points = [];
// const sign = Math.floor(Math.random() * (1 + 1)) === 0 ? -1 : 1;
const firstX = 0;
const offset = Date.now()
for (let i = 0; i < 4000; i++) {
    const point = {
        x: firstX + (i * 1000),
        y: Math.floor(Math.random() * (5000 + 1))
    };
    points.push(point);
}

const {
    lightningChart,
    SolidFill,
    AxisTickStrategies,
    VisibleTicks,
    ColorHEX,
    AxisScrollStrategies,
    DataPatterns,
    SolidLine
} = lcjs

const chart1 = lightningChart().ChartXY({
    containerId: 'target',
    defaultAxisXTickStrategy: Object.assign({}, AxisTickStrategies.Numeric)
})
    .setBackgroundFillStyle(new SolidFill({ color: ColorHEX('#C6C2C1') }))
    .setChartBackgroundFillStyle(new SolidFill({ color: ColorHEX('#FFFFFF') }))
    .setTitle('LightningCharts 1')
    .setTitleFillStyle(new SolidFill({ color: ColorHEX('#000000') }));
chart1.getDefaultAxisX().tickStrategy.formatValue = (value, range) => {
    return (offset + value).toFixed(0)
}
// Fijo las propiedades del eje y
chart1.getDefaultAxisY()
    .setTitle('mV')
    .setScrollStrategy(AxisScrollStrategies.fitting)
    .setAnimationScroll(false)
    .fit(true)
    .setAnimationZoom(undefined)
    .setTitleFillStyle(new SolidFill({ color: ColorHEX('#000000') }))
    .setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000') }), tickLength: 20 }));

// Fijo las propiedades del eje x
chart1.getDefaultAxisX()
    .setTitle('milliseconds')
    .setScrollStrategy(AxisScrollStrategies.fitting)
    .setAnimationScroll(false)
    .fit(true)
    .setAnimationZoom(undefined)
    .setTitleFillStyle(new SolidFill({ color: ColorHEX('#000000') }))
    .setTickStyle(new VisibleTicks({ labelFillStyle: new SolidFill({ color: ColorHEX('#000000') }) }));
// Añado las series al chart
// tslint:disable-next-line:max-line-length
const lineSeries1 = chart1.addPointLineSeries({ dataPattern: DataPatterns.horizontalProgressive, xAxis: chart1.getDefaultAxisX() })
    .setName('Serie 1')
    .setStrokeStyle(new SolidLine({
        thickness: 2,
        fillStyle: new SolidFill({ color: ColorHEX('#E72B1C') })
    }))
    .setMouseInteractions(false);


lineSeries1.add(points);

body {
  height: 100vh;
}

<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>