Contrib.social

Pie, Donut charts in chart block fail to render with Google Charts

Open on Drupal.org →
Created on 22 May 2024, 11 months ago
Updated 5 June 2024, 11 months ago

Problem/Motivation

I'm unable to render Donut and Pie charts with a dataset that looks like this:

when "Categories are identified by" is set to "First row". This data set works fine for, e.g., bar charts.

Steps to reproduce

  1. Enable the chart blocks module and dependencies
  2. Create a chart block populated as in the screenshot
  3. Place the block somewhere (e.g. via layout builder) or update the preview
  4. You should see that the chart does not render. Your console will report a JS error like "Uncaught (in promise) Error: Row 1 has 2 columns, but must have 1"

Proposed resolution

This appears to be happening because the settings for the chart include an auto-generated single value array (the first "row" I think) containing only a single "column", "x". Because the header row contains only one column Google Charts appears to expect only one column for subsequent rows. This is the snippet of code (in Drupal\charts_google\Plugin\chart\Library\Google) causing the issue:

    // Stub out corner value.
    $data[0][0] = $data[0][0] ?? 'x';
    if ($element['#chart_type'] === 'bubble') {
      $data[0][2] = 'bubble';
    }

I don't entirely understand what the purpose of this code is, but I've been able to solve the issue by amending it for pie and donut charts to instead populate the 0th row with empty values matching the actual number of columns.

🐛 Bug report
Status

Fixed

Version

5.0

Component

Blocks integration

Created by

🇨🇦Canada dylan donkersgoed London, Ontario

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024