Page 1 of 1
Customize Legend Symbols
Posted: Wed Apr 13, 2016 9:37 am
by 15677821
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!
Re: Customize Legend Symbols
Posted: Wed Apr 13, 2016 2:38 pm
by 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.
Re: Customize Legend Symbols
Posted: Fri Apr 15, 2016 9:19 am
by 15677821
We will check with the default option and let you know the result.
Re: Customize Legend Symbols
Posted: Wed May 04, 2016 3:02 pm
by 15677821
Hello,
Can you please share some sample code for the legend symbol customization? We are unable to find any sample code this customization.
Thanks!
Re: Customize Legend Symbols
Posted: Thu May 05, 2016 8:24 am
by 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;
}
Re: Customize Legend Symbols
Posted: Fri May 06, 2016 1:12 pm
by 15677821
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!
Re: Customize Legend Symbols
Posted: Fri May 06, 2016 2:31 pm
by yeray
Hello,
In the code from my last post, if I change the "switch" from this:
to this:
Then the legend uses the ellipse/triangle styles from the series.pointer and it draws the legend as I understand you are requesting.
Re: Customize Legend Symbols
Posted: Mon May 09, 2016 6:08 am
by 15677821
Thanks for the response. Now its working as expected.