LumaxForge
ZH EN

Line Chart (Line)

This chapter explains the key points of configuring a Line chart in EasyChart: how to set it up, how data is interpreted, and which fields affect rendering.

1. Use cases

  • Trend changes (time series / category-based)
  • Comparing multiple curves (same X dimension)
  • Line styles such as smooth / step / straight

2. Minimum viable setup (checklist)

  1. ChartProfile.coordinateSystem = Cartesian2D
  2. Axes (Axis Settings)

    3. - X: usually Category (fill labels) or Value (numeric X axis) - Y: usually Value

  3. Series (Series panel)

    4. - Add 1 Serie - Serie.type = Line - Serie.seriesData has at least 2 points (a line needs at least two points)

3. Inspector fields (what you see in panels)

  • ChartProfile / Coordinate System

    • - coordinateSystem

  • Axis Settings (depends on coordinate system)

    • - Cartesian: cartesian.xAxisId / cartesian.yAxisId - Axis list: axes[] (each Axis has axisType/labels/min/max/autoRange/...)

  • Series (each curve)

    • - series[i].type = Line - series[i].settings: actual type is LineSettings - stroke: line stroke (type/color/width/texture, etc.) - point: point marker style (toggle/size/texture, etc.) - hover: hover emphasis (enables pick radius / highlight) - area: area fill (fill under the line) - series[i].labelSettings: point labels (visibility/format/decimals/offset, etc.)

4. SeriesData field interpretation (runtime behavior)

Line chart uses:

  • X coordinate: SeriesData.x
  • Y value: SeriesData.value
  • SeriesData.y is not used for rendering in line charts (do not treat y as the Y value).

Two common patterns:

4.1 Category X + Value Y (most common)

  • X axis: AxisType.Category
  • AxisConfig.labels = ["A","B","C",...]
  • Data points:

    • - x = category index (0/1/2..., mapped into labels) - value = numeric value

4.2 Value X + Value Y (numeric X axis)

  • X axis: AxisType.Value
  • Data points:

    • - x = X value - value = Y value

Additional note: when your axis dimensions are X=Value, Y=Category, runtime treats it as a transposed Cartesian layout (transposed) and swaps how X/Y are interpreted during rendering (useful for horizontal layouts).

5. Common style settings (LineSettings)

  • Line type: LineSettings.stroke.lineType

    • - Straight: straight lines - Step: step line - Smooth: smooth curve

  • Stroke width/color: LineSettings.stroke.width / LineSettings.stroke.color
  • Point markers: LineSettings.point.show/size/textureFill
  • Area fill: LineSettings.area.show + LineSettings.area.textureFill

6. Common pitfalls and troubleshooting (by symptoms)

  • Line breaks / not visible

    • - Check whether SeriesData.value contains NaN/Infinity - A line needs at least 2 valid points

  • Points do not align with labels (Category X)

    • - Check that x is an index within 0..(labels.Count-1) - Do not write x as a category string (EasyChart uses index, not string)

  • I filled y, but the chart is wrong

    • - Line chart uses value as the Y value, not y

7. Further reading

  • Axes/range, Series and data: 00_02-WorkflowAndLibrary.md
  • Common recipes: 04_08-CommonRecipes.md
  • FAQ: 04_09-FAQ.md