Problem/Motivation

The chart is used in a block via the Chart type field. The "Background color" input of the chart may have an optional value. If I add one (f.e. #123456). It is stored well. I can edit it when I reopen the Edit block form. However, this background does not apply anywhere. Neither nor its parent contains this data.

Steps to reproduce

Drupal 11.3.11 | PHP 8.4 | No patches related to this module have been applied.
1. Add a Chart type field to an entity (f.e. block content).
2. Fill in a new chart with some values, and then set a bg color in the "Background color" input of the chart.
3. Save changes and see your entity (block) render.
4. Find the chart you added. It has no background applied.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#7 Screenshot_20260710-061131.png229.33 KBandileco
charts-bg-color.png32.57 KBserhii-che

Issue fork charts-3609779

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:

About issue forks

Comments

serhii-che created an issue. See original summary.

andileco’s picture

andileco commented

Thank for reporting. I have a hunch this is library-specific. Which library are you using?

serhii-che’s picture

serhii-che commented

I use the Chart.js library

andileco’s picture

andileco commented

Thank you. I can replicate with Chart.js, C3.js, Billboard.js, and (separate module) Apache Echarts.

andileco’s picture

andileco commented

@serhii-che - are you providing a MR?

serhii-che’s picture

serhii-che commented

Unfortunately, I won't be able to fix this and create an MP due to my lack of skills in this area

andileco’s picture

andileco commented
StatusFileSize
new Screenshot_20260710-061131.png229.33 KB

It looks like for Chart.js, the standard solution is CSS. You can also write a plugin, but I am not especially inclined to go this route. Will CSS work for you?

serhii-che’s picture

serhii-che commented

I've now added an option to apply a background, so that workaround works.
I just wanted to find out what exactly the problem was—whether it was with the 'charts' module or an incompatibility between the option and the Chart.js library. Thank you for your quick response and advice

andileco’s picture

andileco commented

I think this is pretty achievable to code by putting something like this in the library classes for each of the libraries that don't support it natively:

if (!empty($element['#background'])) {
  $element['#attributes']['style'][] = 'background-color:' . Xss::filter($element['#background']) . ';';
}

andileco opened merge request !211

andileco’s picture

andileco commented
Status: Active » Needs review

Moved forward with the approach described in #9 for Chart.js, Billboard.js, and C3.js.

I also added an additional:

// Merge in chart raw options (applies to both methods).
$chart_definition = $this->applyRawOptions($element, $chart_definition);

For Billboard.js and C3.js. Chart.js already had it.

nikathone’s picture

nikathone
Primary language Swahili
Location Ontario
commented
Status: Needs review » Needs work

Could we move the work that apply the background into a trait to avoid code duplication and improve maintainability?

andileco’s picture

andileco commented
Status: Needs work » 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.

  • andileco committed cf6a2df0 on 5.2.x 
    fix: #3609779 The "Background color" input of the chart does not apply

Status: Fixed » Closed (fixed)

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