LineChart

LineChart displays data as connected points over a continuous axis, ideal for showing trends, changes over time, or relationships between variables. Use it time series data, progress tracking, and comparing multiple data series on the same scale.

The LineChart component accommodates the size of its parent unless you set it explicitly:

<Card height="240px" width="75%">
  <LineChart
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
  />
</Card>

Example: dimension determined by the parent

<Card height="240px" width="75%">
  <LineChart
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
  />
</Card>

<Card height="240px">
  <LineChart
    height="200px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
  />
</Card>

Example: dimension overwritten by LineChart

<Card height="240px">
  <LineChart
    height="200px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
  />
</Card>

Key features:

Flexible orientation: Choose horizontal or vertical bar layouts
Multiple data series: Display several metrics on the same chart with different colored bars
Stacked vs grouped: Stack bars on top of each other or place them side by side
Custom formatting: Use tickFormatter to format axis labels and LabelList for data labels

Behaviors

This component supports the following behaviors:

Behavior	Properties
Animation	`animation`, `animationOptions`
Bookmark	`bookmark`, `bookmarkLevel`, `bookmarkTitle`, `bookmarkOmitFromToc`
Component Label	`label`, `labelPosition`, `labelWidth`, `labelBreak`, `required`, `enabled`, `shrinkToLabel`, `style`, `readOnly`
Publish/Subscribe	`subscribeToTopic`
Tooltip	`tooltip`, `tooltipMarkdown`, `tooltipOptions`
Styling Variant	`variant`

Properties

`data`

The data to be displayed in the line chart.It needs to be an array of objects, where each object represents a data point.

`hideTickX`

default: false

Determines whether the X-axis ticks should be hidden. If set to (true), the ticks will not be displayed.

`hideTickY`

default: false

Determines whether the Y-axis ticks should be hidden. If set to (true), the ticks will not be displayed.

`hideTooltip`

default: false

Determines whether the tooltip should be hidden.If set to (true), no tooltip will be shown when hovering over data points.

`hideX`

default: false

Determines whether the X-axis should be hidden. If set to (true), the axis will not be displayed.

`hideY`

default: false

Determines whether the Y-axis should be hidden. If set to (true), the axis will not be displayed.

`marginBottom`

The bottom margin of the chart

`marginLeft`

The left margin of the chart

`marginRight`

The right margin of the chart

`marginTop`

The top margin of the chart

`showLegend`

default: false

Determines whether the legend should be displayed.

`tickFormatterX`

A function that formats the X-axis tick labels. It receives a tick value and returns a formatted string.

<App>
  <LineChart
    height="240px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
    tickFormatterX="{(value) => '(' + value + ')'}"
  />
</App>

Example: tickFormatterX

<App>
  <LineChart
    height="240px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
    tickFormatterX="{(value) => '(' + value + ')'}"
  />
</App>

`tickFormatterY`

A function that formats the Y-axis tick labels. It receives a tick value and returns a formatted string.

<App>
  <LineChart
    height="240px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
    tickFormatterY="{(value) => '
    
  

 + value}"
  />
</App>

Example: tickFormatterY

<App>
  <LineChart
    height="240px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44 },
        { 'sprint': 'Sprint 2', 'A': 32 },
        { 'sprint': 'Sprint 3', 'A': 48 },
        { 'sprint': 'Sprint 4', 'A': 72 }
       ]}"
    yKeys="{['A']}"
    xKey="sprint"
    tickFormatterY="{(value) => '
    
  

 + value}"
  />
</App>

`tooltipTemplate`

This property allows replacing the default template to display a tooltip.

<App>
  <LineChart
    height="240px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
        { 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
        { 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
        { 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
       ]}"
    yKeys="{['A', 'B']}"
    xKey="sprint"
  >
      <property name="tooltipTemplate">
        <VStack backgroundColor='white' padding="$space-2">
          <Text fontWeight='bold'>{$tooltip.label}</Text>
          <Items data="{$tooltip.payload}">
            <HStack gap="$space-2" verticalAlignment="center">
              <Stack
                width="8px"
                height="8px"
                backgroundColor="{$item.color}" />
              <Text>{$item.label}: {$item.value}</Text>
            </HStack>
          </Items>
        </VStack>
      </property>
  </LineChart>
</App>

Example: tooltipTemplate

<App>
  <LineChart
    height="240px"
    data="{[
        { 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
        { 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
        { 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
        { 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
       ]}"
    yKeys="{['A', 'B']}"
    xKey="sprint"
  >
      <property name="tooltipTemplate">
        <VStack backgroundColor='white' padding="$space-2">
          <Text fontWeight='bold'>{$tooltip.label}</Text>
          <Items data="{$tooltip.payload}">
            <HStack gap="$space-2" verticalAlignment="center">
              <Stack
                width="8px"
                height="8px"
                backgroundColor="{$item.color}" />
              <Text>{$item.label}: {$item.value}</Text>
            </HStack>
          </Items>
        </VStack>
      </property>
  </LineChart>
</App>

The tooltipTemplate prop allows you to customize the appearance and content of chart tooltips. The template receives a $tooltip context variable containing:

$tooltip.label: The label for the data point (typically the yKey value)
$tooltip.payload: An object containing all data values for the hovered point
$tooltip.active: Boolean indicating if the tooltip is currently active

`xKey`

The key in the data objects used for labeling different data series.

`yKeys`

This property specifies the keys in the data objects that should be used for rendering the lines.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
width-line-LineChart	1px	1px