Line Chart Card

Card type: lineChart

The line chart card displays a line chart from tabular data. You can control the line type, colors, stroke width, and various display options.

In addition to the common parameters the lineChart card has the following configuration options:

Name	Type	Required	Default	Description
`value`	list of dict	Yes	—	The data to be plotted. Each dict represents a data point.
`fillCard`	bool	No	`false`	When set to `True`, the chart will fill the entire card space including the header area. When `False` (default), the chart will be positioned below the header.
`label_override`	dict	No	—	Optional: pretty labels for data series.
`chart_options`	dict	Yes	—	Chart configuration options. See table below.

Chart Options

Name	Type	Required	Default	Description
`xKey`	str	Yes	—	The property in each dict to use for the x-axis values.
`yKeys`	list of str	Yes	—	The properties in each dict to use for the y-axis values (can be multiple series).
`strokeKeys`	list of str	No	—	The properties in each dict to use for the stroke colors of each series.
`lineType`	”monotone”, “linear”, “step”, “stepBefore”, “stepAfter”	No	`"monotone"`	The type of line curve to use.
`strokeWidth`	number	No	`2`	Width of the stroke line.
`dotSize`	number	No	`4`	Size of the data points (0 to hide dots).
`defaultColors`	”monochrome” or “multicolor”	No	`"monochrome"`	Fallback color scheme if no color is provided in the data.
`fontSize`	str	No	(auto)	Font size for labels/tooltips. (if not set, this scales with the card size).
`showLegend`	bool	No	`true`	Whether to show the legend below the chart.
`showGrid`	bool	No	`true`	Whether to show the grid lines.
`showYAxis`	bool	No	`true`	Whether to show the y-axis.
`margin`	dict	No	`{top: 15, right: 15, bottom: 10, left: -10}`	Chart margins.
`xAxisConfig`	dict	No	`{tickLine: false, axisLine: false, tickMargin: 8, maxChars: 3}`	X-axis configuration (tickLine, axisLine, tickMargin, maxChars).
`yAxisConfig`	dict	No	`{tickLine: false, axisLine: false, tickMargin: 8, maxChars: 10}`	Y-axis configuration (tickLine, axisLine, tickMargin, maxChars).
`gridConfig`	dict	No	`{vertical: false, horizontal: true}`	Grid configuration (vertical, horizontal).

Axis labels

X-axis labels are automatically truncated to 3 characters and Y-axis labels to 10 characters to prevent overcrowding. You can override this using maxChars in xAxisConfig or yAxisConfig.

Line Types

"monotone": Smooth curved line (default)
"linear": Straight line connections between points
"step": Step-like line with horizontal and vertical segments
"stepBefore": Step-like line that changes before each point
"stepAfter": Step-like line that changes after each point

Examples

Simple Line Chart

This example shows a basic line chart with a single data series.


import polars as pl
 
# Create some data
df = pl.DataFrame({
    "month": ["January", "February", "March", "April", "May", "June"],
    "sales": [186, 305, 237, 73, 209, 214],
})
 
# Convert to the format expected by the line chart
data = df.to_dicts()
 
# Override labels
label_override = {
    "sales": {"label": "Sales"},
}
 
datacards.publish.card(
    type='lineChart',
    value=data,
    label="Monthly Sales",
    chart_options={
        "xKey": "month",
        "yKeys": ["sales"],
    },
    label_override=label_override,
    logic_view_size=(4,2),
)

Multi-Series Line Chart

This example demonstrates multiple data series with different colors. Each series gets its own line with automatic color assignment.


import polars as pl
 
# Create some data
df = pl.DataFrame({
    "month": ["January", "February", "March", "April", "May", "June"],
    "sales": [186, 305, 237, 73, 209, 214],
    "profit": [120, 200, 180, 90, 150, 160],
})
 
# Convert to the format expected by the line chart
data = df.to_dicts()
 
# Override labels
label_override = {
    "sales": {"label": "Sales"},
    "profit": {"label": "Profit"},
}
 
datacards.publish.card(
    type='lineChart',
    value=data,
    label="Sales and Profit",
    chart_options={
        "xKey": "month",
        "yKeys": ["sales", "profit"],
        "defaultColors": "multicolor",
    },
    label_override=label_override,
    logic_view_size=(4,2),
)

Step Line Chart

This example shows a step line chart, which is useful for data that changes at discrete intervals.


import polars as pl
 
# Create some data
df = pl.DataFrame({
    "time": ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00"],
    "temperature": [15, 12, 18, 25, 28, 22],
})
 
# Convert to the format expected by the line chart
data = df.to_dicts()
 
# Override labels
label_override = {
    "temperature": {"label": "Temperature (°C)"},
}
 
datacards.publish.card(
    type='lineChart',
    value=data,
    label="Daily Temperature",
    chart_options={
        "xKey": "time",
        "yKeys": ["temperature"],
        "lineType": "step",
        "xAxisConfig": {"maxChars": 5},
        "margin": {"top": 15, "right": 25, "bottom": 10, "left": -10}
    },
    label_override=label_override,
    logic_view_size=(4,2),
)

Line Chart with Custom Colors

This example demonstrates how to specify custom colors for each data series using the strokeKeys option.


import polars as pl
 
# Create some data
df = pl.DataFrame({
    "quarter": ["Q1", "Q2", "Q3", "Q4"],
    "revenue": [1000, 1200, 1100, 1400],
    "costs": [800, 900, 850, 1000],
    "revenue_color": ["#10b981", "#10b981", "#10b981", "#10b981"],
    "costs_color": ["#ef4444", "#ef4444", "#ef4444", "#ef4444"],
})
 
# Convert to the format expected by the line chart
data = df.to_dicts()
 
# Override labels
label_override = {
    "revenue": {"label": "Revenue"},
    "costs": {"label": "Costs"},
}
 
datacards.publish.card(
    type='lineChart',
    value=data,
    label="Financial Overview",
    chart_options={
        "xKey": "quarter",
        "yKeys": ["revenue", "costs"],
        "strokeKeys": ["revenue_color", "costs_color"],
        "lineType": "linear",
    },
    label_override=label_override,
    logic_view_size=(4,2),
)