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
PointShape Description Rectangle The series with rectangle-shaped points Triangle The series with triangle-shaped points. Square The 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) }, ])