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
- Add a Chart field to a content type (or place a Chart block, or a Chart (Canvas) block).
- Select a dual-axis chart type, e.g.
Column. - Enter two or more series in the data-collector table.
- 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
selectbeside the color control inChartDataCollectorTable, and read it back per series (both table orientations). - In
Chart::buildElement(), apply the per-series value as#chart_typeon eachchart_data. No library or JavaScript changes are required, because providers already honor per-series#chart_type. - Compute the offered types in
BaseSettingsand 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 invertedbarisn't mixed with non-invertedcolumn/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 handlescolorandtarget_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_optionselement property (array oftype_id => label). Defaults to empty, in which case no control is rendered — no behavior change for existing usages.ChartDataCollectorTable::getSeriesFromCollectedTable()now includes achart_typekey 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_typeis stored in the same series cell array as the existingcolor, within the field's already-serialized config blob and the block config.charts_configdoes 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.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | chart_canvas_two_series.mp4 | 2.47 MB | andileco |
| #3 | charts_datacollectortable.mp4 | 8.85 MB | andileco |
Issue fork charts-3609694
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
Comment #3
andileco commentedI have it working and tests pass green. Two videos attached to show how/that it works.
Comment #4
andileco commentedComment #5
andileco commentedComment #6
nikathoneComment #7
andileco commentedBack to you @nikathone
Comment #8
nikathoneLooks good. Thanks
Comment #10
andileco commented