[CLOSED] CartesianChart Legend Borders

  1. #1

    [CLOSED] CartesianChart Legend Borders

    Hello again,

    When rendering a CartesianChart with a legend, I can't seem to turn off the borders. Consider the example: https://examples3.ext.net/#/Chart/Bar/Stacked/ . What I am looking to do is have the legend rendered like so:

    Click image for larger version. 

Name:	Capture.PNG 
Views:	21 
Size:	2.7 KB 
ID:	24050

    In the documentation http://docs.ext.net/index.html#topic...0000014D7.html , it is indicated that there is a BoxStroke attribute of the ChartLegend object. However when I create a ChartLegend object it doesn't have that attribute:

    Click image for larger version. 

Name:	Capture2.PNG 
Views:	18 
Size:	6.2 KB 
ID:	24051

    It does have instead Border, BorderStyle, and BorderStyleWidth properties, but none of these seem to affect the outline of the legend. Is there something I am doing wrong? Really if you could just take the stacked bar chart example and show how to turn off the legend box borders that would be great.

    Thanks again!
    Last edited by Daniil; Jul 21, 2015 at 11:01 AM. Reason: [CLOSED]
  2. #2
    The Ext.NET theme is setting this border to legends, that's why its hard to override it dynamically.

    You can add this style to the beginning of your page in order to remove this border on the legend:

            <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>
    I've noticed this when I was looking after your issues yesterday, it just ignored borders. I guess I'll have to put a little more time on this as it is more likely a bug in the underlying ExtJS framework.

    For now, that seems to be the best solution. I couldn't find yet a bug report about this on the ExtJS site.

    As for the second style-sheet definition above, I couldn't help but make it that specific; if set just .x-legend-item it would keep being overriden by the more-specific theme CSS definition.

    I'll get back soon, probably with an open issue on our GitHub issue tracking system.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @MrProtonYo!

    What do you think about the solution I suggested you? Did it work for you?..

    If you are fine with the CSS override, I think we should leave it as it is; this legend border issue is inherent from the JavaScript framework and fixing it on our own should be done only if strictly necessary, as it would mean it could break at any ExtJS update.

    We hope to hear from you soon.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] CartesianChart Legend Titles
    By MrProtonYo in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 01, 2015, 7:08 PM
  2. [CLOSED] Questions about CartesianChart objects
    By MrProtonYo in forum 3.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 01, 2015, 7:06 PM
  3. [CLOSED] CartesianChart Background Color
    By MrProtonYo in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 01, 2015, 7:01 PM
  4. [CLOSED] CheckBoxGroup with borders
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 16, 2012, 1:13 PM
  5. [CLOSED] [1.0] Remove Borders
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 31, 2010, 10:14 AM

Posting Permissions