[CLOSED] Ext Chart

[Prasoon]

Hi Team,

Need your help, i want to know how to put borders around ext chart legend items.



thanks,
Prasoon

[fabricio.murta]

Hello @Prasoon!

You can use this css rule to set a border to the legend color bullets:

.x-legend-item-marker {
    position: absolute;
    width: 0.8em;
    height: 0.8em;
    border: solid 0.1em black;
    left: 0.7em;
    top: 0.85em;
}

Hope this helps!

[Prasoon]

Thanks for your reply, i tried using the css but no result, i am using mix of bar chart and line chart




thanks,
prasoon

[fabricio.murta]

Can you share the code you used to write that chart -- probably with a simplified dummy data?

Alternatively, you can right-click the colored legend square bullet on your browser, 'Inspect Element' and check which CSS class it is using. And then do something similar to what I posted in the previous message to that CSS class the bullet span receives.

[Prasoon]

Thanks for your guidance, i tied and was able to get the border by adding border property in "Inline style" css rule, but how to override this rule, please help.



I am sorry, its really tough for me to share a code, as we are getting data from database.

thanks,
Prasoon

[fabricio.murta]

Hello @Prasoon!

Sorry, I think I've tested this on a v3 chart or something like it, it seems that from v2 to v3 the legend turned from svg sprites buildup to actual HTML5 elements. So in v2 there's not much that can be done with css styling.

The bad news is that it is not so easy to restyle charts in Ext.NET v2. The good news is that I ended up finding how to do so:

        Ext.define('Ext.chart.LegendItem', {
            override: 'Ext.chart.LegendItem',
            drawFilledBox: function (width, height, z, index) {
                var me = this,
                    surface = me.surface,
                    series = me.series;

                return me.add('box', surface.add({
                    type: 'rect',
                    zIndex: (z || 0) + 2,
                    x: 0,
                    y: 0,
                    width: width,
                    height: height,
                    fill: series.getLegendColor(index),
                    stroke: 'black',
                    strokeWidth: 1,
                    style: {
                        cursor: 'pointer'
                    }
                }));
            }
        });

Notice the two stroke lines on the code above. This is the only change from the original code and should get you with the borders.

[Prasoon]

OMG it worked, thanks a lot Fabricio. you guys always amaze me with your solution :), once again thank you.

Please mark is CLOSED.

thanks and regards,
Prasoon