How to paint each Amcharts4 Radial bar chart series1 within the provided color list

Viewed 66

Unable to paint each series1 line by the provided color list. I need each line to be painted different. Tried different methods and got stuck.

<!-- Resources -->
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <div id="chartdiv"></div>


/*CSS*/
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    
    #chartdiv {
      width: 100%;
      height: 650px;
    }


//Chart code
    am4core.ready(function() {
    
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    var chart = am4core.create("chartdiv", am4charts.RadarChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
    
      
      chart.colors.list = [
      am4core.color("#000"),
      am4core.color("#D65DB1"),
      am4core.color("#FF6F91"),
      am4core.color("#FF9671"),
      am4core.color("#FFC75F"),
    ];
      
    chart.data = [
      {
        category: "ENE",
        value1: 6.1,
      },
      {
        category: "FEB",
        value1: 3,
      },
      {
        category: "MAR",
        value1: 5.4,
      },
      {
        category: "ABR",
        value1: 4.5,
      },
      {
        category: "MAY",
        value1: 2.1,
      },
      {
        category: "JUN",
        value1: 6.5,
      },
      {
        category: "JUL",
        value1: 6.1,
      },
      {
        category: "AGO",
        value1: 3.6,
      },
      {
        category: "SEP",
        value1: 3.3,
      },
      {
        category: "OCT",
        value1: 1.1,
      },
      {
        category: "NOV",
        value1: 6.1,
        lineColor: chart.colors.next(),
      },
      {
        category: "DIC",
        value1: 4,
      },
      {
        category: "ENE2",
        value1: 3.1,
      },
      {
        category: "FEB2",
        value1: 2.1,
        lineColor: chart.colors.next(),
      },
      {
        category: "MAR2",
        value1: 5.1,
      }
    ];
    
    //chart.padding(20, 20, 20, 20);
    
    
    var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "category";
    categoryAxis.renderer.labels.template.location = 0.5;
    categoryAxis.renderer.labels.template.horizontalCenter = "right";
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.renderer.tooltipLocation = 0.5;
    categoryAxis.renderer.grid.template.strokeOpacity = 0.07;
    categoryAxis.renderer.axisFills.template.disabled = true;
    categoryAxis.interactionsEnabled = false;
    categoryAxis.renderer.minGridDistance = 10;
    
    var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.renderer.labels.template.horizontalCenter = "left";
    valueAxis.min = 0;
    valueAxis.max = 7.1;
    valueAxis.strictMinMax = true;
    valueAxis.renderer.maxLabelPosition = 0.99;
    valueAxis.renderer.minGridDistance = 100; 
    valueAxis.renderer.grid.template.strokeOpacity = 0.07;
    valueAxis.renderer.axisFills.template.disabled = true;
    valueAxis.interactionsEnabled = false;
    
    
    var series1 = chart.series.push(new am4charts.RadarColumnSeries());
    series1.columns.template.tooltipText = "{name}: {valueX.value}";
    series1.name = "Medición";
    series1.dataFields.categoryY = "category";
    series1.dataFields.valueX = "value1";
    //series1.stacked = false;
    series1.columns.template.propertyFields.fill = "lineColor";
    
    chart.seriesContainer.zIndex = -1;
    chart.scrollbarX = new am4core.Scrollbar();
    chart.scrollbarX.exportable = false;
    chart.scrollbarY = new am4core.Scrollbar();
    chart.scrollbarY.exportable = false;
    chart.cursor = new am4charts.RadarCursor();
    chart.cursor.lineY.disabled = true;
    
    }); 
    
    //end am4core.ready()

Codepen to try code

I'm unable to reproduce the following within my own codepen "Radial bar chart": Working official solution "supposed"

I'm able to do it with the provided official examples but not with the Radial bar chart "atm". Any help really appreciated.

0 Answers
Related