Two or more charts in a same page will ignore transparency styling

[fabriciomurta]

Found: 5.2.0 Ext.NET forums thread: Problem transparent background chart

If two or more charts are displayed in the same page, background color (including "transparent" color) will be ignored to all but the first rendered chart.

The issue happens when chart background is specified in markup (WebForms) as:

<Background Fill="transparent" />

Then it gets output in client JS script simply as:

background: 'transparent',

To overcome the issue, making it output as a sprite object instead of a string is sufficient:

<CustomConfig>
    <ext:ConfigItem Name="background" Value="{ fill: 'transparent' }" Mode="Raw" />
</CustomConfig>

So that output is:

background: { fill: 'transparent' },

This is also reproducible with pure Ext JS in this fiddle: Dual charts on transparent background (35js). The fiddle has the different options as comments in code that can just be toggled to see the results.

[fabriciomurta]

The documentation supports its usage as a color string, so it is an Ext JS issue: Ext.chart.AbstractChart.background config option

[fabriciomurta]

Found this to be an issue with the Ext.util.Color.setFromString not supporting the transparent color albeit this being something supported from CSS and also "promised" by the documentation (at least if unsupported color is provided, claimed to return rgba(0,0,0,0) which is indeed transparent).

The specific issue can be explored with:

var colorHandle = Ext.create('Ext.util.Color');
colorHandle.setFromString('blue'); // returns {r: 0, g: 0, b: 255, a: 1}
colorHandle.setFromString('none'); // returns {r: 0, g: 0, b: 0, a: 0}
colorHandle.setFromString('an_unsupported_color_name'); // returns {r: 0, g: 128, b: 128, a: 1}
colorHandle.setFromString('transparent'); // returns {r: 0, g: 128, b: 128, a: 1}