What causes "Error parsing the data-chart-options attribute value. ${e}" in octobercms/october?

Convert every extra argument to a `key = value` pair, e.g. `{% partial "alert" type="warning" %}`.

octobercms/october · error · Error

Error parsing the data-chart-options attribute value. ${e}

Error message

Error parsing the data-chart-options attribute value. ${e}

What it means

After the partial name expression, the `{% partial %}` tag accepts only the bare keywords (`lazy`, `body`, etc.) or `paramName = expression` pairs, where paramName is a Twig NAME (hyphenated names like `data-testid` are re-assembled from NAME `-` NAME). Anything else in the argument stream — a second positional argument, a bare value, a missing `=` — falls through to the else branch and throws this generic SyntaxError.

Source

Thrown at modules/backend/assets/foundation/controls/chart/chart.line.js:97

                    y: 20
                }
            },
            legend: {
                show: true,
                noColumns: 2
            }
        };

        this.defaultDataSetOptions = {
            shadowSize: 0
        };

        var parsedOptions = {};
        try {
            parsedOptions = oc.parseJSON("{" + this.config.chartOptions + "}");
        }
        catch (e) {
            throw new Error('Error parsing the data-chart-options attribute value. '+e);
        }

        this.chartOptions = $.extend({}, this.chartOptions, parsedOptions);

        this.resetZoomLink = $(this.config.resetZoomLink);

        this.$el.trigger('oc.chartLineInit', [this]);

        // Bind events
        if (this.config.resetZoomLink) {
            this.resetZoomLink.on('click', this.proxy(this.clearZoom));
        }

        if (this.config.zoomable) {
            this.$el.on("plotselected", this.proxy(this.onPlotSelected));
        }

        // Markings helper

View on GitHub (pinned to b608633a7e)

Solutions

Convert every extra argument to a `key = value` pair, e.g. `{% partial "alert" type="warning" %}`.
Check the reported line for a missing `=` or a stray token (comma, string, number) after the partial name.
Use hyphenated names directly when needed: `{% partial "card" data-testid="card-1" %}` is valid because NAME `-` NAME is reassembled.

Example fix

// before
{% partial "alert" "warning" %}

// after
{% partial "alert" type="warning" %}

Defensive patterns

Strategy: try-catch

Validate before calling

// Compile-check every CMS template before deploy
use Cms\Classes\Theme;
$theme = Theme::getActiveTheme();
foreach (Cms\Classes\Page::listInTheme($theme, true) as $page) {
    $page->parseMarkup(); // throws Twig\Error\SyntaxError on bad {% partial %} args
}

Try / catch

try {
    return $twig->render($name, $vars);
} catch (Twig\Error\SyntaxError $e) {
    // Message carries 'Invalid syntax in the partial tag. Line N'
    return 'Template error: '.$e->getMessage();
}

Prevention

Always pass extra partial arguments as name=value pairs; positional args are not supported.
Lint templates in CI with a Twig parse pass so syntax errors never reach production.
When adding attributes remember hyphenated names are supported but values still need `=`.

When it happens

Trigger: Passing a second positional argument: `{% partial "alert" "warning" %}`; writing a parameter without `=`: `{% partial "alert" type %}`; a trailing comma or an operator where a name was expected. All extra arguments must be `name=value` pairs.

Common situations: Assuming `{% partial %}` supports positional template variables like a function call; hand-editing templates and dropping the `=`; pasting macro-style syntax into a partial tag.

Related errors

AI-assisted analysis of octobercms/october@b608633a7e (2026-08-21). Data as JSON: /api/errors/ab2664d1ba10fffd. Report an issue: GitHub.