CODEWITHSUNDEEP
javascriptamchartsamcharts4
dan
dan

Reputation: 1402

Rotate CategoryAxis labels on amcharts4 radar chart

I'm trying to rotate the CategoryAxis labels on a amchart Radar Chart, to place them in a way that makes more sense for radar columns.

All I managed so far was to rotate the whole chart, but what I'm trying to achieve is to to move the category labels (category1, category2, category3 in the example) so that they are placed in the center of the "pie-slice" that holds the category data, instead of at the edge of it.

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.RadarChart);

chart.data = [{
  "category": "category1",
      "employee1": 100,
      "employee2": 200,
      "employee3": 100,

}, {
  "category": "category2",

      "employee1": 300,
      "employee2": 100,
      "employee3": 150
}, {
  "category": "category3",
    "employee1": 200,
    "employee2": 200,
    "employee3": 250
}];

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

let series1= chart.series.push(new am4charts.RadarColumnSeries());      
series1.dataFields.valueY = "employee1";
series1.dataFields.categoryX = "category";
    
let series2= chart.series.push(new am4charts.RadarColumnSeries());      
series2.dataFields.valueY = "employee2";
series2.dataFields.categoryX = "category";
    
let series3= chart.series.push(new am4charts.RadarColumnSeries());      
series3.dataFields.valueY = "employee3";
series3.dataFields.categoryX = "category";
  
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: 400px;
}
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

Upvotes: 0

Views: 503

Answers (2)

Hamid Ayub
Hamid Ayub

Reputation: 87

So, I found an answer to this questions:

 let valueLabel = series.bullets.push(new am4charts.LabelBullet())
 valueLabel.label.text = '{value}'
 valueLabel.locationX = 1
 valueLabel.dx = -30
 valueLabel.fontSize = 14

Upvotes: 0

Hamid Ayub
Hamid Ayub

Reputation: 87

Hope this will work out.

Do the following for all 4 series:

let valueLabel = series1.columns.template.createChild(am4core.Label)
valueLabel.text = '{employee1}'
valueLabel.fontSize = 14
valueLabel.valign = 'top'
valueLabel.fill = am4core.color('#fff')
valueLabel.rotation = 270
valueLabel.dy = 10
valueLabel.strokeWidth = 0

Upvotes: 0

Related Questions