Line Graphs

import {LineGraph} from 'cx/charts';

Line charts are commonly used for data trends visualization.

Line 2

Line 1

Data points count		Area	Line
50 points
Smooth	Smoothing ratio
	0.07

Controller Index

<div class="widgets" controller={PageController}>
    <Legend />
    <Svg style="width:600px; height:400px;">
        <Chart offset="20 -10 -40 40" axes={{ x: { type: NumericAxis, lineStyle: "stroke: transparent" }, y: { type: NumericAxis, vertical: true } }}>
            <Gridlines />
            <LineGraph data-bind="$page.points" colorIndex={8} yField="y2h" y0Field="y2l" active-bind="$page.line2" line={false} area-bind='$page.showArea' smooth-bind='$page.smooth' smoothingRatio-bind='$page.smoothingRatio' />
            <LineGraph name="Line 1" data-bind="$page.points" colorIndex={0} area-bind='$page.showArea' active-bind="$page.line1" smooth-bind='$page.smooth' smoothingRatio-bind='$page.smoothingRatio' line-bind='$page.showLine' />
            <LineGraph name="Line 2" data-bind="$page.points" colorIndex={8} yField="y2" active-bind="$page.line2" smooth-bind='$page.smooth' smoothingRatio-bind='$page.smoothingRatio' line-bind='$page.showLine' />
        </Chart>
    </Svg>

    <LabelsTopLayout columns={4} mod='stretch'>
        <LabelsTopLayoutCell colSpan={2}>
            <Slider
                label="Data points count"
                maxValue={200}
                minValue={5}
                step={1}
                value={{ bind: "$page.pointsCount", debounce: 100 }}
                help-tpl="{$page.pointsCount} points"
            />
        </LabelsTopLayoutCell>
        <Switch label="Area" value-bind="$page.showArea" />
        <Switch label="Line" value-bind="$page.showLine" />

        <Switch label="Smooth" value-bind="$page.smooth" style='margin-right: 20px'/>
        <Slider
            label="Smoothing ratio"
            enabled-bind="$page.smooth"
            value={{ bind: "$page.smoothingRatio", debounce: 100 }}
            maxValue={0.4}
            minValue={0}
            step={0.01}
            help-tpl="{$page.smoothingRatio:n;0;2}"
        />
    </LabelsTopLayout>
</div>

Copied!Cx Fiddle

Examples

Stacked

Configuration

Property	Description	Type
area	Area switch. Default value is `false`.	boolean
colorIndex	Index of a color from the standard palette of colors. 0-15.	number
colorMap	Used to automatically assign a color based on the `colorName` and the contextual `ColorMap` widget.	string
colorName	Name used to automatically resolve color based from the contextual `ColorMap` widget. If value is not provided, `name` is used instead.	string
data	Data for the graph. Each entry should be an object with at least two properties whose names should match the `xField` and `yField` values.	array
line	Line switch. By default, the line is shown. Set to `false` to hide the line and draw only the area.	boolean
name	Name of the item as it will appear in the legend.	string
smooth	Set to `true` to draw smoothed lines between data points using cubic Bézier curve. When enabled, the graph uses control points calculated from neighboring values to create smooth transitions between data points.	boolean
stacked	Indicate that columns should be stacked on top of the other columns. Default value is `false`.	boolean
xAxis	Name of the horizontal axis. The value should match one of the horizontal axes set in the `axes` configuration of the parent `Chart` component. Default value is `x`.	string
xField	Name of the property which holds the x value. Default value is `x`.	string
y0	Base value used for area charts. Default value is `0`.	number
y0Field	Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array.	string \| false
yAxis	Name of the vertical axis. The value should match one of the vertical axes set in the `axes` configuration if the parent `Chart` component. Default value is `y`.	string
yField	Name of the property which holds the y value. Default value is `y`.	string
active	Used to indicate if an item is active or not. Inactive items are shown only in the legend.	boolean
areaStyle	Additional styles to be applied to the area below the line.	string/object
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
hiddenBase	If set to `true`, the chart can clip the base of the graph and show only the appropriate range that contains the values. Default value is `false`.	boolean
legend	Name of the legend to be used. Default is `legend`. Set to `false` to hide legend entry for this item.	string \| false
legendAction	Action to be performed if the user clicks on the legend entry. Default value is `auto`. Other permitted values are `toggle` and `select`.	string
legendShape	Shape of the icon in the the legend. Default value is based on the chart type. Additional shapes can be registered using the `registerShape` function. Out of the box, CxJS offers `square`, `bar`, `column`, `line`, `vline` and `triangle` shapes.	string
lineStyle	Additional styles to be applied to the line element.	string/object
smoothingRatio	Controls the intensity of the smoothing effect applied to Bézier curves when `smooth` is enabled. Accepts a number between `0` (straight lines) and `0.4` (maximum smoothing). Values outside this range are automatically clamped. Default value is `0.05`.	number
stack	Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object

Documentation

Line Graphs