Problem/Motivation

Currently, it's not possible to create a combo chart with the blocks or fields due to not having a way to select a per-series chart type. Let's add that!

Combo charts (mixing, say, a line over columns) are already supported by the chart_data render element and every library plugin via a per-series #chart_type, and can be produced through the API and through Views chart attachments. The gap is only in the UI paths built on the data-collector table — the Chart field and Chart block — plus the Chart (Canvas) block's JSON input, none of which expose a per-series type.

Steps to reproduce

  1. Add a Chart field to a content type (or place a Chart block, or a Chart (Canvas) block).
  2. Select a dual-axis chart type, e.g. Column.
  3. Enter two or more series in the data-collector table.
  4. Note there is no way to make one series render as a different type (e.g. a line over the columns). Combo charts can only be built via the API or Views attachments, not through the field/block UI.

Proposed resolution

Add a per-series chart type control next to the existing per-series color control in the data-collector table, carry the value through to the built chart, and extend the Canvas block's JSON to match. Specifically:

  • Render an optional per-series chart type select beside the color control in ChartDataCollectorTable, and read it back per series (both table orientations).
  • In Chart::buildElement(), apply the per-series value as #chart_type on each chart_data. No library or JavaScript changes are required, because providers already honor per-series #chart_type.
  • Compute the offered types in BaseSettings and restrict them to genuinely combinable types: dual-axis only, excluding coordinate types (scatter, bubble, heatmap) and multi-value types (candlestick, boxplot), and matching the base type's axis orientation (so inverted bar isn't mixed with non-inverted column/line). The control only appears for dual-axis base types.
  • The base chart type acts as the default; a per-series value simply overrides it (empty = inherit).
  • Extend the Chart (Canvas) block so a series in the JSON input may carry an optional "chart_type", mirroring how it already handles color and target_axis.

Remaining tasks

  • MR review by co-maintainer (in progress).

User interface changes

  • New per-series chart type select in the data-collector table (Chart field and Chart block), shown beside the color control. An empty selection (- Chart default -) means the series inherits the chart's base type.
  • The control only appears when the base chart type is dual-axis; the offered options are limited to combinable types for the selected library and base type.
  • Chart (Canvas) block: the JSON input accepts an optional per-series "chart_type"; the field help text documents it.

API changes

  • ChartDataCollectorTable: new #series_type_options element property (array of type_id => label). Defaults to empty, in which case no control is rendered — no behavior change for existing usages.
  • ChartDataCollectorTable::getSeriesFromCollectedTable() now includes a chart_type key per returned series.
  • New method BaseSettings::getCombinableChartTypes(string $library_plugin_id = '', string $base_type_id = '').
  • No breaking changes to existing public signatures.

Data model changes

  • None to configuration schema. The per-series chart_type is stored in the same series cell array as the existing color, within the field's already-serialized config blob and the block config. charts_config does not strictly type the collected series cells, so no schema update is required.
  • Existing saved charts are unaffected: series without a per-series type simply inherit the base chart type.

Issue fork charts-3609694

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

andileco created an issue. See original summary.

andileco’s picture

Status: Active » Needs review
StatusFileSize
new8.85 MB
new2.47 MB

I have it working and tests pass green. Two videos attached to show how/that it works.

andileco’s picture

Assigned: andileco » nikathone
andileco’s picture

Issue summary: View changes
nikathone’s picture

Status: Needs review » Needs work
andileco’s picture

Status: Needs work » Needs review

Back to you @nikathone

nikathone’s picture

Status: Needs review » Reviewed & tested by the community

Looks good. Thanks

  • andileco committed 56d1587b on 5.2.x
    feat: #3609694 Create a chart type select in the table headings of the...
andileco’s picture

Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.