JavaScript Point Line Chart

Also known as a Line Series, Line Graph, Line Chart, and Line with Markers

This example shows the basic usage of a line series with 'markers' for visual representation of the data points. Similarly to line series, it is drawn on a Cartesian coordinate system and represents the relationship between two variables. Line series display information as a series of data points connected by straight line segments in any direction. This type of series additionally draws data markers on top of the line at the location specified in a dataset.

The chart can be created with few simple lines of code:

// Add a line series with markers using default X and Y axes.
const lineSeries = chart.addPointLineSeries()

Line Series with markers provides an ability to specify styles for both markers and lines individually.

lineSeries.setStrokeStyle(lineStyleObject).setPointFillStyle(fillStyleObject)

It shares the same API with the PointSeries, which allows configuring the visual representation of data markers.

  • PointShape: enum

    PointShapeDescription
    RectangleThe series with rectangle-shaped points
    TriangleThe series with triangle-shaped points.
    SquareThe series with square-shaped points.

    PointShape must be specified upon creation of Series!

    // Add a line series with markers using default X and Y axes. Select Circle PointShape.
    const lineSeries = chart.addPointLineSeries({
        pointShape: PointShape.Circle,
    })
  • PointSize: number

    lineSeries.setPointSize(5.0)
  • IndividualPointFill: FillStyle

    The style indicates individual per point coloring. The style enables the usage of individual fill taken from the input.
    The series can accept points in format { x: number, y: number, color: Color }
    If the color is not provided during the input of data points ( e.g. in format { x: number, y: number } ), the configurable fallback color is used.

    // Create the instance of IndividualPointFill fill style.
    const individualStyle = new IndividualPointFill()
    // Set red color as a fallback color
    individualStyle.setFallbackColor(ColorRGBA(255, 0, 0))

As it was mentioned before, the series accepts points in format { x: number, y: number: color: Color } with specified IndividualPointFill to enable individual point coloring or { x: number, y: number } for other fill styles. Any number of points can be added with a single call similarly to line series with point markers.

  • Dataset without colors.

    • If IndividualPointFill is specified, the fallback color is used. Otherwise, the specified fill style is used.
    // Dataset of Vec2 data points without color.
    lineSeries.add([
        { x: 5, y: 10 },
        { x: 7.5, y: 20 },
        { x: 10, y: 30 },
    ])
  • Dataset with individual colors.

    • If IndividualPointFill is specified, the color from data point or fallback color is used. Otherwise, the specified fill style is used.
    // Dataset of Vec2Color data points with individual color.
    lineSeries.add([
        // use red color if IndividualPointFill is specified
        { x: 2.5, y: 0, color: ColorRGBA(255, 0, 0) },
        // use fallback color if IndividualPointFill is specified
        { x: 5, y: 10 },
        // use green color if IndividualPointFill is specified
        { x: 7.5, y: 20, color: ColorRGBA(0, 255, 0) },
        // use blue color if IndividualPointFill is specified
        { x: 10, y: 30, color: ColorRGBA(0, 0, 255) },
    ])