Customize Legend Symbols

[SenSeo]

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]

Hello,

The legend symbol by default supports line and rectangle styles. However, you can override the function to draw images or other shape forms.

[SenSeo]

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

[SenSeo]

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]

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;
    }

[SenSeo]

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!

[Yeray]

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.

[SenSeo]

Thanks for the response. Now its working as expected.