First example

Let's look at a very basic XY data visualization use case to get first contact with LightningChart JS concepts.

import { lightningChart } from "@arction/lcjs";

const chart = lightningChart().ChartXY().setTitle("My Chart");

const axisX = chart.getDefaultAxisX().setTitle("X Axis");

const axisY = chart.getDefaultAxisY().setTitle("Y Axis");

const lineSeries = chart
  .addLineSeries({
    // Optimize line series for progressively increasing X coordinates.
    dataPattern: { pattern: 'ProgressiveX' }
  })
  .setName("My Line Series")
  .add([
    { x: 0, y: 10 },
    { x: 1, y: 15 },
    { x: 2, y: 12 },
    { x: 3, y: 7 },
    { x: 4, y: 8 },
  ]);

const legend = chart.addLegendBox().add(chart);

The above code should be relatively self explanatory. There you can see extremely common classes, like Chart (in this case, ChartXY), Axis, LineSeries and LegendBox.

Most common LightningChart JS configurations can be called fluently one after another, for example:

const lineSeries = chart
  .addLineSeries()
  .setName("My Line Series")
  .setCursorEnabled(true)
  .setVisible(true);

Instead of more traditional:

const lineSeries = chart.addLineSeries();
lineSeries.setName("My Line Series");
lineSeries.setCursorEnabled(true);
lineSeries.setVisible(true);

There is nothing wrong with either of these, but you'll find our examples to widely utilize the fluent syntax (1st example).

The Series concept

In LightningChart, there are a wide number of different Series types, such as LineSeries, PointSeries, etc. The general idea is that a Series is something that represents the users data, and is usually attached to some Axes.

By choosing and combining different series types, the user can produce a wide range of different data visualizations; Using a LineSeries results in a Line Chart. Picking a PointSeries will produce a Scatter Chart, and so on.

Going further, more complicated data visualizations can be produced by simply combining several series within one chart. For example, adding 2 LineSeries into one chart, or visualizing one data set with a LineSeries and another with an AreaSeries.