customize fusioncharts chart-legend-item text

Question

I want to change the legend visualization for the doughnut2D chart to a rectangle and value and label it in two different rows with icons like the attached screenshot?

Please share any code implementation for this, it's very helpful for me.

Thank you.

Answer 1

You can customize legend as per your requirement like position, icons etc.

Set the Legend Position -

Use the following attributes to set legend position:

Specify the position of the legend using the legendPosition attribute. You can set its value to one of the following, to position the legend likewise with respect to the chart - bottom, top, top-left, top-right, bottom-left, bottom-right, left, left-top, left-bottom, right, right-top, right-bottom, or absolute.

If you set the value of legendPosition to absolute, you also need to set the coordinates for the legend using the attributes legendXPosition and legendYPosition, both of which accept absolute or percentage values.

Set the legendAllowDrag attribute to 1 to make the legend draggable.

{
  "chart": {
    "legendPosition": "top-right",
    "legendAllowDrag": "1"
  }
}

To know more about this functionality please refer - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/legend#set-the-legend-position

To Draw a Custom Legend Icon Shape -

Use the following attributes to draw a custom legend icon shape:

Set the drawCustomLegendIcon attribute to 1 to enable drawing of a custom legend icon. All other legend icon customization attributes work only if you enable this feature.

Refer to the code below:

{
  "chart": {
    "drawCustomLegend": "1"
  }
}

Document reference - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/legend#draw-a-custom-legend-icon-shape

As per your case - Set the number of sides for the legend icon using the legendIconSides attribute.

"legendIconSides": "4",

Here is the demo fiddle - https://jsfiddle.net/68x5cfzb/

Hope this would help you.