Blog

How to add Legend interactivity to your charts in NetCharts Designer

In this blog post we will guide you through the simple steps of enabling the required CDL parameters in your chart template using NetCharts Designer. Including these parameters to any chart type that has the Legend enabled, will allow you to interact with the chart by hovering the pointer over the legend items and the […]

Author:
Date:
April 13, 2015
Category:
Design Approaches, Developer Products, NetCharts Designer, NetCharts Pro

In this blog post we will guide you through the simple steps of enabling the required CDL parameters in your chart template using NetCharts Designer. Including these parameters to any chart type that has the Legend enabled, will allow you to interact with the chart by hovering the pointer over the legend items and the corresponding lines, bars or slices will change colors. The finished template can in turn be exported into NetCharts Server or to be used with NetCharts Pro.

  1. Launch NetCharts Designer and open an existing chart such a Line, Bar or Pie chart.

    (Or, click the Create a new Project button.

    Sparkline_Create_a_new_Project

    Then click the Create a new Chart button and as the chart type select a Line, Bar or Pie chart for example.)

    Sparkline_Create_a_new_Chart

  2. Enable the Legend by first clicking Legend on the Presentation tab.

    PresentationTab_Legend

  3. Then on the right side locate the Display box and click the Show Legend: checkbox.

    PresentationTab_LegendCheckbox

  4. In the Animation dropdown, select the default graylegend which in this case will draw a gray animation over the lines, bars or pie slices when hovering over the legend items.
    Note: You can also chose to create your own custom color here if you wish. This is done by clicking the pencil icon PresentationTab_PencilIcon which is located right next to the dropdown to add or modify styles.

    PresentationTab_Animation

  5. Save the template, by going to: File -> Save (or Ctrl+S) and you’re done!

Now run your chart as SVG (Or test by clicking the chart shown in the NetCharts Designer Preview Browser) and then try these newly added parameters by hovering the pointer over each of the legend items. Depending on which chart type you are using you will see the matching lines, bars or slices will change colors. Then click on any of the legend items to hide or show the lines, bars or slices.

To further tweak the styling exactly the way you like, see the CDL Reference Guide (.pdf) for detailed information on these parameters and much more.

Also see our related blog post here where we demonstrate how to add legend interactivity to your raster and vector charts in NetCharts Pro.

Stay tuned for more tips on design approaches! If you have any questions, feel free to contact us at support@visualmining.com.

Comments are closed.