Customize Legend Symbols

TeeChart for Javascript for the HTML5 Canvas
Post Reply
SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Customize Legend Symbols

Post by SenSeo » Wed Apr 13, 2016 9:37 am

Hello Team,

Using the Teechart Javascript/HTML5 library, How to customize the Legend series symbols? For example, I am using multiple series in one single chart and each series contains different symbols inside the chart. I would like to show the same symbol in legend too as per the series basis.

Can you please provide samples to achieve this?

Thanks!

Yeray
Site Admin
Site Admin
Posts: 8972
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Customize Legend Symbols

Post by Yeray » Wed Apr 13, 2016 2:38 pm

Hello,

The legend symbol by default supports line and rectangle styles. However, you can override the function to draw images or other shape forms.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Customize Legend Symbols

Post by SenSeo » Fri Apr 15, 2016 9:19 am

We will check with the default option and let you know the result.

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Customize Legend Symbols

Post by SenSeo » Wed May 04, 2016 3:02 pm

Hello,

Can you please share some sample code for the legend symbol customization? We are unable to find any sample code this customization.

Thanks!

Yeray
Site Admin
Site Admin
Posts: 8972
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Customize Legend Symbols

Post by Yeray » Thu May 05, 2016 8:24 am

Hello,

The first option is to use one of the two supported styles, line and rectangle. Ie:

Code: Select all

Chart1.legend.symbol.style = "line";  //"rectangle"
You could also add some extra styles overriding the symbol.draw function. Here it is an example of adding two extra "ellipse" and "triangle" styles:

Code: Select all

    Chart1.legend.symbol.style = "ellipse"; //"triangle";

    Chart1.legend.symbol.oldSymbolDraw = Chart1.legend.symbol.draw;

    function tryHover(series,index) {
        if (series.hover.enabled) {
            var sv=Chart1.legend.showValues();

            if ((sv && (series.over==index)) ||
                    ((!sv) && (series.over>=0)))
                return series.hover;
        }

        return null;
    }

    Chart1.legend.symbol.draw=function(series,index,x,y) {
        var f=this.format=new Tee.Format(Chart1);
        var c = Chart1.ctx, fhover=tryHover(series, index), old=f.fill, olds=f.stroke;

        f.fill= series.legendColor(index);

        c.z=-0.01;

        switch (this.style) {
            case "triangle": {
                y = y-this.height*0.5-1;

                f.polygon([new Point(x+this.width*0.5,y),
                    new Point(x+this.width,y+this.height),
                    new Point(x,y+this.height)]);

                break;
            }
            case "ellipse": {
                f.ellipse(x+this.width*0.5, y, this.width, this.height);
                break;
            }
            default: {
                this.oldSymbolDraw(series,index,x,y);
                break;
            }
        }

        f.fill=old;
        f.stroke=olds;
    }
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Customize Legend Symbols

Post by SenSeo » Fri May 06, 2016 1:12 pm

Thanks. We tried with the sample code. Ellipse symbol is working fine. But, Triangle symbol is not working.

Also, when we customize the symbol style it is applying for all the series. Actually, we are having multiple series in a single graph and each series contains different symbols. So based on that we need to display the symbols in the legend section. Is it possible to apply the individual symbols for each series?

Please help us on this issue.

For example, in our sample code we are using two series and we used the ellipse symbol for the legend. The ellipse symbol is applied for both the series. But, In the chart one series having Triangle and another one series having ellipse.
Please refer the attached image.

Thanks!
Attachments
Legend.jpg
Legend.jpg (7.41 KiB) Viewed 7991 times

Yeray
Site Admin
Site Admin
Posts: 8972
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Customize Legend Symbols

Post by Yeray » Fri May 06, 2016 2:31 pm

Hello,

In the code from my last post, if I change the "switch" from this:

Code: Select all

switch (this.style) {
to this:

Code: Select all

switch (series.pointer.style) {
Then the legend uses the ellipse/triangle styles from the series.pointer and it draws the legend as I understand you are requesting.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

SenSeo
Newbie
Newbie
Posts: 71
Joined: Wed Mar 09, 2016 12:00 am

Re: Customize Legend Symbols

Post by SenSeo » Mon May 09, 2016 6:08 am

Thanks for the response. Now its working as expected.

Post Reply