🥰 [FEATURE]: Allow Differentiated Styling within a Line Series Based on Data Field (e.g., 'live' vs 'backtest')

[rahulp-github]

Feature description

I am working with data structured similarly to this:

[
  {"name":"Strategy","returnsPct":0.2,"date":"2025-04-07","group":"backtest"},
  {"name":"Strategy","returnsPct":0.3,"date":"2025-04-08","group":"live"},
  {"name":"Benchmark","returnsPct":0.5,"date":"2025-04-08","group":"benchmark"}
]

My goal is to display two primary lines based on the name field: 'Strategy' and 'Benchmark'. However, for the 'Strategy' line, I need to visually differentiate the segments based on the group field. Specifically, I want the 'live' portion of the 'Strategy' line to have a different color (or potentially line style) than the 'backtest' portion. The 'Benchmark' line should have its own consistent color.

Current approaches in G2Plot v2.4 don't seem to handle this specific requirement elegantly:

1. Using seriesField: 'name': This creates two lines ('Strategy', 'Benchmark') but applies a single color/style to the entire 'Strategy' line, failing to distinguish between 'backtest' and 'live' segments within it.
2. Using seriesField: 'group': This creates three distinct lines ('backtest', 'live', 'benchmark'), each with its own color. While this achieves visual differentiation, it splits the conceptual 'Strategy' series into two separate entries in the legend and styling, which might not be the desired representation.
3. Regarding colorField: I've looked at the Line plot documentation (https://g2plot.antv.antgroup.com/en/api/plots/line). While the documentation might mention colorField, this option doesn't appear to be implemented for Line plots to achieve this kind of conditional styling within a series based on another data field like group. The standard color option applies typically per-series when used with seriesField. (If colorField Is present in the docs but non-functional for this, this could also be flagged as a documentation issue).

Desired Solution / Feature Request:

I request a more direct way to apply distinct visual styles (primarily color) to different segments within a single line series, based on the values of another field in the data (like the group field in the example).

This would allow treating 'Strategy' as one series conceptually (e.g., in tooltips or potentially a grouped legend) while still visually highlighting transitions or different modes like 'backtest' vs 'live'.

🏞 What problem does this feature solve

This is crucial for financial charts (comparing backtesting vs live trading), operational dashboards (highlighting different operational modes), and generally any scenario where a single time series has distinct phases or categories that need visual differentiation without splitting it into entirely separate series

🧐 What does the proposed API look like

// Idealized Example (Illustrative)
const linePlot = new Line('container', {
  data,
  xField: 'date',
  yField: 'returnsPct',
  seriesField: 'name', // Main series grouping
  color: { // Map main series names to base colors
     field: 'name',
     values: ['#FF0000', '#0000FF'] // e.g., Red for Strategy base, Blue for Benchmark
  },
  // NEW Proposed Option for within-series segment styling:
  segmentStyle: [ // Array applies rules sequentially? Or map?
      {
          filter: (dataPoint) => dataPoint.name === 'Strategy' && dataPoint.group === 'live',
          style: { stroke: '#FFA500' } // e.g., Orange for 'live' segment of 'Strategy' line
      },
      {
          filter: (dataPoint) => dataPoint.name === 'Strategy' && dataPoint.group === 'backtest',
          style: { stroke: '#FF0000', lineDash: [4, 4] } // e.g., Base color but dashed for 'backtest'
      }
      // Benchmark uses default series style from 'color' mapping
  ]
});

linePlot.render();

🚑 Any additional

This is primarily a Feature Request / Enhancement. If the documentation explicitly mentions a non-functional colorField for this purpose on Line plots, then it also includes a Documentation issue.

(Component): @antv/g2plot
(Version): ^2.4.32 (and potentially newer versions)