Can you define the legend yourself?

[linsee]

Hi,

I have another question to ask, can you answer it?

Can the legend on the chart be rewritten? Write to the button or checkbox defined by myself to achieve the legend effect that comes with the chart?
As shown in the figure below, can you customize the method to achieve the same effect as the legend? If you have any examples, please provide it. Thank you.


Thanks,

Linsee.

[Baby Palanidurai]

 Hi Linsee, 

Thanks for using syncfusion products, 

  

We have analyzed your query. Your requirement can be achieved by annotation feature. Using annotation feature we can place any text or HTML element in chart. Annotation can be placed based on  coordinateUnit. 

1. Pixels
2. Points
3. None

Pixels: x and y values consider as pixel based on `region` property whether it depends on `Chart`(placed the annotation element with respect to container) or `Series` (Placed the annotation element with respect to chart area). 

Points: x is represented as series points(x and y). 

As for your requirement, we have prepared  a sample with annotation. In that sample we have created the annotation dynamically in chart load event based on number of series count. And then we have set the series visibility based on the check box click event. Here, we have placed the annotation based on the pixels and the content is check box  and text element.  

For more information on annotations, kindly find the help document. 

Please find the below code snippet to achieve this requirement, 

//annotation element 

<div id='series' style="display:none">          

       <table> 

        <tr> 

          <td><div> 

            <input type='checkbox' id='' checked=true onclick="clickTolegend1(this.id);"/> 

            </div> 

          </td> 

         <td><div id='Germany'> 

            Germany 

            </div> 

         </td> 

       </tr> 

      </table> 

     </div> 

function clickTolegend(id) { 

       var chart = $('#container').ejChart('instance'); 

       // set the visibility for un checked series 

      if (chart.model.series[+id].visibility === 'visible') { 

            chart.model.series[+id].visibility = 'Hidden';     

       } else { 

                    chart.model.series[+id].visibility = 'visible'; 

       } 

       chart.redraw(); 

       for (var i = 0; i < chart.model.series.length; i++) { 

         document.getElementById(i).checked = chart.model.series[i].visibility === 'visible' ? true : false;  

       } 

    }; 

// load event – here create the annotation dynamicaly 

   load: function (args) { 

              var content = document.getElementById('series'); 

                for (var i = 0; i < args.model.series.length; i++) { 

                  var element = content.cloneNode(true); 

                  element.id += i; 

                  element.children[0].children[0].children[0].children[0].children[0].children[0].id +=i 

                  document.body.appendChild(element); 

                  args.model.annotations[i] = []; 

                  args.model.annotations[i] = { 

                      visible:true, content:"series"+i, 

                      coordinateUnit:"pixels", x:(220 + (i * 50)), y:30, 

                    } 

                } 

           } 

 

Screenshot:  

Before unchecked series: 

 

After unchecked series: 

 

Sample for your reference can be find from below link, 

https://jsplayground.syncfusion.com/z2v2ok55 

  

Kindly revert us, if you have any queries. 

  

Thanks, 

Baby. 

[linsee]

Hi Baby,

     Thank you for the case code provided, which has been customized by modifying the HTML DOM.

Thanks,

Linsee.

[Baby Palanidurai]

Hi Linsee, 

Thanks for your update, 

   Please let us know if you need any further assistance on this. 

Thanks, 

Baby.