Search code examples
amcharts4radar-chartradial-gradients

How to create a radial chart or a sunburst chart to achieve the chart of the image?

I'm trying to create a radar chart where the X axis is a category axis with variable widths, and the Y axis is a value axis with values ranging from 0 to 2, which can be positioned along the radius.

I tried with this chart, but I cannot modify the category width: https://www.amcharts.com/demos-v4/variable-radius-radar-v4/

I thought also using a sunburst chart (https://www.amcharts.com/demos-v4/sunburst-chart-v4/) by using gradient with solid colors (e.g. red - white), but again, I don't know how to create a gradient of this type.

Any ideas or alternative chart libraries?

Example of desired chart

Solution

  • Finally I have achieved it using a sunburst and radial gradients for the colors:

    https://codepen.io/diedel/pen/VwJBamV

    // Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// create chart
var chart = am4core.create("chartdiv", am4plugins_sunburst.Sunburst);
chart.padding(0, 0, 0, 0);
chart.radius = am4core.percent(90);

// Energy
energyValue = 0.7;
energyColor = "#f29a98";
energyGradient = new am4core.RadialGradient();
energyGradient.addColor(am4core.color("rgba(255, 255, 255, 0)"), 1, 0);
energyGradient.addColor(am4core.color("rgba(255, 255, 255, 0)"), 1, (1 + energyValue) / 2);
energyGradient.addColor(am4core.color(energyColor), 1, (1 + energyValue) / 2);
energyGradient.addColor(am4core.color(energyColor), 1, 1);
...