Chart legend borders are unable to be changed; styling it sets an outside border only

[fabriciomurta]

Ext.NET (and ExtJS) binds charts' legends to the classes .x-legend-container and .x-legend-item which defines the legend's border in a theme-level.

This makes it impossible to setup legend's border in application-level. For example, these settings will just change outside legends:

<LegendConfig Dock="Right" StyleSpec="border: solid 2px red" />

or

<LegendConfig Dock="Right">
  <CustomConfig>
    <ext:ConfigItem Name="border" Value="5" />
    <ext:ConfigItem Name="style">
      <ext:Parameter Name="borderStyle" Value="solid" />
    </ext:ConfigItem>
  </CustomConfig>
</LegendConfig>

Sencha treated this issue as a CSS-overriding matter and does not seem to be committed to fix it at all: How to remove border from Ext.chart.legend.Legend.

The only known way so far to override these borders is thru CSS re-styling, according to this forum thread: CartesianChart Legend Borders.

<style>
  .x-legend-container {
    border: 0;
  }

  .x-docked-left.x-legend .x-legend-item,
  .x-docked-right.x-legend .x-legend-item,
  .x-docked-left.x-legend-panel .x-legend-item,
  .x-docked-right.x-legend-panel .x-legend-item {
    border-top: 0;
  }
</style>

Update: The chart still has theme-sided borders set in 6.0.1.

[fabriciomurta]

Additionally, notice that LegendConfig does not support setting the 'style' sub-parameter as suggested to work on this sencha post, thus the second code snippet above uses CustomConfig to achieve that.

Steps to reproduce: try to remove the border on the legend's graph on example: Column Chart - Stacked Columns

What you want is:

[fabriciomurta]

This probably is a feature that is bound to be only changed by CSS rules in themes, like the grid panels' inner lines or other visual effect, so this is probably not going to be ever fixed/implemented in ExtJS.

[fabriciomurta]

Update: Sencha issue allegedly fixed by the time ExtJS 6.5.1 was released.

[fabriciomurta]

Update: Sencha issue allegedly fixed by the time ExtJS 6.5.2 was released.

[fabriciomurta]

Update: Sencha issue allegedly fixed by the time ExtJS 6.5.3 was released.

[fabriciomurta]

The issue is not fixed at all. The previously checked issue was just a linkto a comment made in sencha forums. Now added "How to remove border from Ext.chart.legend.Legend" which is closer to the actual issue (removing the theme-bound borders of chart legends). The thread has not been considered a bug at all, so that's probably not going to be fixed any soon.

[fabriciomurta]

Update: Sencha issue allegedly fixed by the time ExtJS 6.6.0.258 was released. Wrong: they didn't assume this as an actual issue. Updated, moving the unrelated sencha thread to the second comment, so that we don't mistake the actual thread (that's just treated as question) with a issue-tracking thread. Unfortunately there is not going to be any issue tracking thread in Sencha for this.