Interactive line

Ordered numeric series with categorical, numerical, and temporal axes; labels, symbols, references, fills, and multiple aligned series.

Purpose: Show change across an ordered sequence.
Use when: Order and direction matter, especially for a small number of time series.
Avoid when: Unordered categories or many crossing series obscure comparison.
Equivalent data: Provide the ordered values in an adjacent table when exact readings matter.

Six deterministic category values preserve the upstream shape.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

Usage Example

@interactiveline.Line(interactiveline.Config{
  Label: "Basic line example",
  XAxis: []string{"Apple", "Banana", "Peach", "Lemon", "Pear", "Cherry"},
  Series: []interactiveline.Series{{
    Name: "Category A",
    Data: []interactiveline.Data{{Value: 120}, {Value: 132}, {Value: 101}, {Value: 134}, {Value: 90}, {Value: 230}},
  }},
})

Labels and symbols

Labels expose exact point values; symbols distinguish points without changing the data.

Every point exposes its value directly.

Exact category and values

Category	Series	Value
Apple	Category A	150
Banana	Category A	232
Peach	Category A	201
Lemon	Category A	154
Pear	Category A	190
Cherry	Category A	130

6 ordered x values across 1 series.

Two smoothed series use visible diamond points.

Exact category and values

Category	Series	Value
Apple	Category A	120
Apple	Category B	220
Banana	Category A	182
Banana	Category B	282
Peach	Category A	191
Peach	Category B	291
Lemon	Category A	234
Lemon	Category B	334
Pear	Category A	290
Pear	Category B	390
Cherry	Category A	330
Cherry	Category B	430

6 ordered x values across 2 series.

Labels and symbols

@interactiveline.Line(interactiveline.Config{
  Label: "Visible point labels",
  XAxis: []string{"Apple", "Banana", "Peach"},
  Series: []interactiveline.Series{{
    Name: "Category A",
    Data: []interactiveline.Data{{Value: 150}, {Value: 232}, {Value: 201}},
  }},
  SeriesOptions: chart.SeriesOptions{
    Label: &chart.LabelOptions{Show: chart.Bool(true)},
    ShowSymbol: chart.Bool(true), Symbol: "diamond", SymbolSize: 15,
  },
})

References and split lines

Calculated points and horizontal guides add context while the adjacent tables retain exact values.

Maximum, average, and minimum points are named beside exact values.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

Horizontal guides support scanning across labeled points.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

References and split lines

References: interactiveline.References{
  Points: []interactiveline.PointReference{
    {Name: "Maximum", Statistic: interactiveline.StatisticMaximum},
    {Name: "Average", Statistic: interactiveline.StatisticAverage},
    {Name: "Minimum", Statistic: interactiveline.StatisticMinimum},
  },
  ShowLabels: chart.Bool(true),
}

Numerical axis and guides

A numerical x axis supports ranges, coordinate guides, vertical thresholds, and theme-aware scale pieces.

Thirty ordered coordinates include two scale pieces, a highlighted range, and two guide lines.

Exact x and values

X	Series	Value
0	Category A	118
1	Category A	117
2	Category A	116
3	Category A	111
4	Category A	114
5	Category A	109
6	Category A	100
7	Category A	119
8	Category A	106
9	Category A	101
10	Category A	116
11	Category A	115
12	Category A	118
13	Category A	105
14	Category A	116
15	Category A	111
16	Category A	118
17	Category A	101
18	Category A	108
19	Category A	119
20	Category A	114
21	Category A	113
22	Category A	112
23	Category A	115
24	Category A	106
25	Category A	109
26	Category A	100
27	Category A	115
28	Category A	118
29	Category A	101

30 ordered x values across 1 series.

Numerical axis and guides

@interactiveline.Line(interactiveline.Config{
  Label: "Numerical x axis with guides",
  ValueAxis: &interactiveline.ValueAxis{Values: []float64{0, 1, 2}},
  Series: []interactiveline.Series{{
    Name: "Category A",
    Data: []interactiveline.Data{{Value: 107}, {Value: 112}, {Value: 118}},
    References: interactiveline.References{
      Areas: []interactiveline.RangeReference{{Name: "Danger zone", StartX: 1, EndX: 2}},
    },
  }},
  VisualScale: &interactiveline.VisualScale{
    Dimension: interactiveline.VisualDimensionX,
    Pieces: []interactiveline.VisualPiece{{GreaterThan: chart.Float(0), LessThan: chart.Float(2)}},
  },
})

Line shape treatments

Step, smooth, area, and smooth-area treatments share one component and typed series options.

The line changes after each category boundary.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

A curved treatment emphasizes overall direction.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

A half-opacity area emphasizes magnitude; the marked interval identifies in-stock categories.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

A light area fill sits below the smoothed line.

Exact category and values

Category	Series	Value
Apple	Category A	120
Banana	Category A	132
Peach	Category A	101
Lemon	Category A	134
Pear	Category A	90
Cherry	Category A	230

6 ordered x values across 1 series.

Line shape treatments

SeriesOptions: chart.SeriesOptions{
  Step: "end",
  Smooth: chart.Bool(true),
  AreaStyle: &chart.AreaStyle{Opacity: chart.Float(0.2)},
}

Multi-series comparisons

Aligned series share one ordered x axis; labels and average references can be configured per series.

Four aligned series preserve the upstream multi-line shape.

Exact category and values

Category	Series	Value
Apple	Category A	120
Apple	Category B	220
Apple	Category C	150
Apple	Category D	320
Banana	Category A	132
Banana	Category B	182
Banana	Category C	232
Banana	Category D	332
Peach	Category A	101
Peach	Category B	191
Peach	Category C	201
Peach	Category D	301
Lemon	Category A	134
Lemon	Category B	234
Lemon	Category C	154
Lemon	Category D	334
Pear	Category A	90
Pear	Category B	290
Pear	Category C	190
Pear	Category D	390
Cherry	Category A	230
Cherry	Category B	330
Cherry	Category C	130
Cherry	Category D	430

6 ordered x values across 4 series.

Two labeled series compare cost across increasing element counts.

Exact category and values

Category	Series	Value
10e1	map	19
10e1	slice	24.9
10e2	map	31
10e2	slice	34.9
10e3	map	43
10e3	slice	48.1
10e4	map	57
10e4	slice	58.3
10e5	map	72
10e5	slice	69.7
10e6	map	118
10e6	slice	123
10e7	map	127
10e7	slice	131

7 ordered x values across 2 series.

Multi-series comparisons

Series: []interactiveline.Series{
  {Name: "Category A", Data: categoryA},
  {Name: "Category B", Data: categoryB},
  {Name: "Category C", Data: categoryC},
  {Name: "Category D", Data: categoryD},
}

Temporal X-axis treatment

UTC timestamps keep one chronological series in order, with exact values beside the chart.

Fifty deterministic UTC time/value observations.

Exact time and values

UTC timestamps. Time domain starts at 2025-01-01T00:00:00Z. Evidence runs from 2025-01-31T00:00:00Z to 2025-03-21T00:00:00Z.

Time	Series	Value
2025-01-31T00:00:00Z	Category A	118
2025-02-01T00:00:00Z	Category A	117
2025-02-02T00:00:00Z	Category A	116
2025-02-03T00:00:00Z	Category A	111
2025-02-04T00:00:00Z	Category A	114
2025-02-05T00:00:00Z	Category A	109
2025-02-06T00:00:00Z	Category A	100
2025-02-07T00:00:00Z	Category A	119
2025-02-08T00:00:00Z	Category A	106
2025-02-09T00:00:00Z	Category A	101
2025-02-10T00:00:00Z	Category A	116
2025-02-11T00:00:00Z	Category A	115
2025-02-12T00:00:00Z	Category A	118
2025-02-13T00:00:00Z	Category A	105
2025-02-14T00:00:00Z	Category A	116
2025-02-15T00:00:00Z	Category A	111
2025-02-16T00:00:00Z	Category A	118
2025-02-17T00:00:00Z	Category A	101
2025-02-18T00:00:00Z	Category A	108
2025-02-19T00:00:00Z	Category A	119
2025-02-20T00:00:00Z	Category A	114
2025-02-21T00:00:00Z	Category A	113
2025-02-22T00:00:00Z	Category A	112
2025-02-23T00:00:00Z	Category A	115
2025-02-24T00:00:00Z	Category A	106
2025-02-25T00:00:00Z	Category A	109
2025-02-26T00:00:00Z	Category A	100
2025-02-27T00:00:00Z	Category A	115
2025-02-28T00:00:00Z	Category A	118
2025-03-01T00:00:00Z	Category A	101
2025-03-02T00:00:00Z	Category A	104
2025-03-03T00:00:00Z	Category A	111
2025-03-04T00:00:00Z	Category A	106
2025-03-05T00:00:00Z	Category A	105
2025-03-06T00:00:00Z	Category A	116
2025-03-07T00:00:00Z	Category A	115
2025-03-08T00:00:00Z	Category A	102
2025-03-09T00:00:00Z	Category A	117
2025-03-10T00:00:00Z	Category A	104
2025-03-11T00:00:00Z	Category A	103
2025-03-12T00:00:00Z	Category A	106
2025-03-13T00:00:00Z	Category A	101
2025-03-14T00:00:00Z	Category A	108
2025-03-15T00:00:00Z	Category A	107
2025-03-16T00:00:00Z	Category A	106
2025-03-17T00:00:00Z	Category A	105
2025-03-18T00:00:00Z	Category A	116
2025-03-19T00:00:00Z	Category A	111
2025-03-20T00:00:00Z	Category A	106
2025-03-21T00:00:00Z	Category A	101

50 ordered x values across 1 series.

Temporal X-axis treatment

@interactiveline.Line(interactiveline.Config{
  Label: "Temporal X axis",
	  TimeAxis: &interactiveline.TimeAxis{
	    Minimum: time.Date(2025, time.January, 1, 0, 0, 0, 0, time.UTC),
    Values: []time.Time{time.Date(2025, time.February, 0, 0, 0, 0, 0, time.UTC)},
  },
  Series: []interactiveline.Series{{Name: "Category A", Data: []interactiveline.Data{{Value: 107}}}},
})

Time series

Use a time axis for chronological observations; keep timestamps strictly ordered and show exact readings beside the chart when people need to compare them.

Mixed-series composition

The upstream mixed line and scatter overlay needs a separate renderer-neutral composite chart API. Line does not accept backing-renderer series or raw option escape hatches.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/interactive/line

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API