1. Home
  2. Forum
  3. WinForms
  4. Customizing chart with multiple Legends

Customizing chart with multiple Legends

I have a scatter chart which is designed to actually be a shmoo chart.

I'm adding a new feature in which each series in the chart has a color and a symbol (represented as a string shown in the cell).  I need to create two legends, one to explain what the colors mean and another to explain what the symbols mean.

For example, lets say there are 4 series:

Blue - A
Red - A
Blue - B
Red - B

I need to create two legends:

Color Legend
Blue = Car
Red = Truck

Symbol Legend
A = 2wd
B = 4wd

The trouble is after I add the second legend to the chart, the two legends always have the same elements.  When I add a series to the chart control it gets added to both legends.  I can't find a way to access the Items collections in the legends independently.
- Karl




7 Replies
VA Vinothkumar Arumugam Syncfusion Team May 14, 2015 08:44 AM UTC

Hi Karl,

Thanks for using Syncfusion products.

We have analyzed your reported query; you can customize chart legend by using ChartLegend list collection. Series collections bind to legend items by using LegendName property.

Following code snippet illustrates how to add custom legends.

Code Snippet [WF]:Form1.cs

· Series Name added to series text.

series1.Name = "Car";

series1.Text = series1.Name;

series2.Name = "Truck";

series2.Text = series2.Name;

series3.Name = "2wd";

series3.Text = series3.Name;

series4.Name = "4wd";

series4.Text = series4.Name;

· Legend collection instance created as below

ChartLegend legend1 = new ChartLegend(chart);

ChartLegend legend2 = new ChartLegend(chart);

legend1.Name = "legend1";

legend2.Name = "legend2";

legend1.Text = "Color Legend";

legend2.Text = "Symbol Legend";

· Binding each series collection to legend collection by using LegendName property

series1.LegendName = "legend1";

series2.LegendName = "legend1";

series3.LegendName = "legend2";

series4.LegendName = "legend2";

ScreenShot:

We have prepared below sample, you can download it from below link

Sample Link:
WindowsFormsApplication11.zip

Please let us know if you have any concern.

Thanks,

Vinothkumar Arumugam.


KT Karl Thorkildsen June 1, 2015 07:05 PM UTC

Thanks, that fixed my problem.  It wasn't clear that they are bound based on their names.

I have a second issue that you might help with.  My Series.Text is generated from input data and can sometimes be very long.  I'd like to be able to have each item in the legend show a tooltip with the complete text of the Series.  Is that possible?
- Karl

VA Vinothkumar Arumugam Syncfusion Team June 2, 2015 01:20 PM UTC

Hi Karl,
We have analyzed your query,
Currently there is no explicit support to the Legend Item tooltip, but we can achieve this by triggering the “Legend.MouseHover” event.
We have prepared a work around sample for  legend tooltip .
You can achieve this by applying following code snippet
Code Snippet [WF]:
·         Declaring an event as follows

   chart.Legend.MouseHover+=Legend_MouseHover;

·         Triggering an event when mouse over

           void Legend_MouseHover(object sender, EventArgs e)

      {

           

Point p1 =this.chart.Legend.PointToClient(new Point(Control.MousePosition.X,  Control.MousePosition.Y));

       ChartLegendItem item = chart.Legend.GetItemBy(p1);

       if (item != null)

            this.toolTip.Show(item.Text, chart.Legend, p1.X + 10, p1.Y + 10, 1000);

      }


The  Legend.GetItemBy method will let you get the reference to a legend item at a specific point .
Screenshot :

Please find the below sample link to download the sample

Sample Location:
WindowsFormsApplication11


Kindly refer our below online documentation link for more details

http://help.syncfusion.com/ug/windows%20forms/Documents/chartlegendandlegenditems.htm

Please let us know if you have any concern.

Thanks,
Vinothkumar Arumugam.


KT Karl Thorkildsen June 2, 2015 04:33 PM UTC

This is a good idea for the tooltip but it only works when the mouse hovers over the legend icon.  The user will probably try to hover the mouse over the text instead of the icon.  Also I have the icon disabled on one of my legends (actually the icon size is set to Size(0,0) due to an issue with the item text when the icon is disabled).

So, do you know a way to get the tooltip to respond when the mouse is hovered over the legend item text?
- Karl

VA Vinothkumar Arumugam Syncfusion Team June 3, 2015 01:07 PM UTC

Hi Karl,

We have analyzed your query,

Currently there is no explicit support to the Legend Item tooltip .But We have prepared a work around sample for legend tooltip .It is achieved by triggering the “Legend.MouseHover” event.

Find the  following code snippet to achieve your requirements:
Code Snippet [WF]:
·         Declaring an event as follows

   chart.Legend.MouseHover+=Legend_MouseHover;

·         Triggering an event when mouse hover

    void Legend_MouseHover(object sender, EventArgs e)

        {                

            Point p1 =chart.Legend.PointToClient(new Point(Control.MousePosition.X, Control.MousePosition.Y));

            foreach (var items in chart.Legend.Items)

            {

                if(p1.X > items.Bounds.X && p1.X<(items.Bounds.X+items.Bounds.Width+items.Bounds.Right))

                       this.toolTip.Show(items.Text, chart.Legend, p1.X + 10, p1.Y + 10, 1000);            

            }

        }


Screenshot of the attached sample result:



Please find the below sample location to download the sample

Sample Location:
WindowsFormsApplication11


Please let us know if you have any concern.

Thanks,
Vinothkumar Arumugam.


KT Karl Thorkildsen June 3, 2015 05:23 PM UTC

Many thanks, with a few tweaks I have the tooltips working well.
- Karl

VA Vinothkumar Arumugam Syncfusion Team June 4, 2015 05:13 AM UTC

Hi Karl,


Thanks for the update.


Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.


Loader.
Up arrow icon