how to make labels curved in amcharts radar chart - amcharts

Question

i want to curve labels of radar chart as done on pie chart here https://codepen.io/team/amcharts/pen/wNYbbo
how to achieve same curved lables on this radarchart
below is the code snippets of my radar chart
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
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: 600px;
}
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = [
{
category: "Happiness",
value1: 8,
"config":{"fill": "red"},
"background": {"fill":"green"}
},
{
category: "Anxiety",
value1: 9,
"config":{"fill": "blue"}
},
{
category: "Three",
value1: 7,
"config":{"fill": "green"}
},
{
category: "Four",
value1: 1,
"config":{"fill": "red"}
},
{
category: "Five",
value1: 2,
"config":{"fill": "orange"}
},
{
category: "Six",
value1: 5,
value2: -5,
"config":{"fill": "black"}
}
];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.cellStartLocation = 0;
categoryAxis.renderer.cellEndLocation = 1;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.min = 0;
var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.columns.template.tooltipText = "{category}: {valueY.value}";
series1.columns.template.width = am4core.percent(100);
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.radarColumn.configField = 'config';
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.xAxis = categoryAxis;
chart.cursor.fullWidthXLine = true;
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineX.fillOpacity = 0.1;
https://codepen.io/omar630/pen/KKWWbNe?editors=0010
here is the codepen link
just need labels curved on outside of respective area sections

Answer 1

var chart = am4core.create("chartdiv", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = [
{
category: "Happiness",
value1: 8,
"config":{"fill": "red"},
"background": {"fill":"green"}
},
{
category: "Anxiety",
value1: 9,
"config":{"fill": "blue"}
},
{
category: "Three",
value1: 7,
"config":{"fill": "green"}
},
{
category: "Four",
value1: 1,
"config":{"fill": "red"}
},
{
category: "Five",
value1: 2,
"config":{"fill": "orange"}
},
{
category: "Six",
value1: 5,
value2: -5,
"config":{"fill": "black"}
}
];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.cellStartLocation = 0;
categoryAxis.renderer.cellEndLocation = 1;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.min = 0;
var series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.columns.template.tooltipText = "{category}: {valueY.value}";
series1.columns.template.width = am4core.percent(100);
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.radarColumn.configField = 'config';
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.xAxis = categoryAxis;
chart.cursor.fullWidthXLine = true;
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineX.fillOpacity = 0.1;
//add below lines in your code
categoryAxis.renderer.labels.template.adapter.add("rotation", function (rotation, target) {
var value = target.dataItem.category;
var position = categoryAxis.categoryToPosition(value);
var angle = categoryAxis.renderer.positionToAngle(position) + 90;
return angle;
});
Try this it will work check bottom lines which are added.

Answer 2

found solution here is the snippet
am4core.ready(function () {
// the chart
var chart = am4core.create("amchart_wheel_of_life", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.innerRadius = am4core.percent(30);
chart.width = am4core.percent(100);
chart.height = am4core.percent(100);
chart.seriesContainer.zIndex = -1; // grid over series
//chart.seriesContainer.background.fill = '#0f0'
//chart.seriesContainer.opacity = 0.5
//chart.padding(20, 20, 20, 20);
// chart data
var wheel_data = [
{
'range': 'another',
'data': [{
"category": "another",
"value": 10,
"color": chart.colors.next(),
}]
},{
'range': 'Your hapsadpiness',
'data': [{
"category": "your haasdppiness",
"value": 10,
"color": chart.colors.next(),
}]
},{
'range': 'Your happiness',
'data': [{
"category": "your happiness",
"value": 10,
"color": chart.colors.next(),
}]
}, {
'range': 'Self Esteem',
'data': [{
"category": "self esteem",
"value": 6,
"color": chart.colors.next()
}]
}, {
'range': 'Your Mood',
'data': [{
"category": "your mood",
"value": 3,
"color": chart.colors.next()
}]
}, {
'range': 'Digital Usage',
'data': [{
"category": "digial usage",
"value": 7,
"color": chart.colors.next()
}]
}, {
'range': 'Job Satisfaction',
'data': [{
"category": "Job Satisfaction",
"value": 9,
"color": chart.colors.next()
}]
}, {
'range': 'your calmness',
'data': [{
"category": "sad",
"value": 5,
"color": chart.colors.next()
}]
}, {
'range': 'stress level',
'data': [{
"category": "stress level",
"value": 2,
"color": chart.colors.next()
}]
}];
// interaction
var categoryIndex = 0;
chart.cursor = new am4charts.RadarCursor();
chart.cursor.innerRadius = am4core.percent(25);
chart.cursor.behavior = "none"; // disable zoom
//chart.cursor.lineX.disabled = true;
//chart.cursor.lineY.fillOpacity = 0.1;
//chart.cursor.lineY.fill = am4core.color("#000000");
//chart.cursor.lineY.strokeOpacity = 0;
//chart.cursor.fullWidthLineY = true;
chart.cursor.events.on("cursorpositionchanged", function (ev) { // up
var xAxis = ev.target.chart.xAxes.getIndex(0);
var yAxis = ev.target.chart.yAxes.getIndex(0);
categoryIndex = xAxis.positionToIndex(xAxis.toAxisPosition(ev.target.xPosition));
//console.log(yAxis.toAxisPosition(ev.target.yPosition));
//console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
});
// var interaction = am4core.getInteraction();
// interaction.events.on("up", function (event) {
// var point = am4core.utils.documentPointToSprite(event.pointer.point, chart.seriesContainer);
// var empty = 4.2;
// var x = (valueAxis.max + empty) - valueAxis.xToValue(point.x);
// var y = (valueAxis.max + empty) - valueAxis.yToValue(point.y);
// var r = Math.sqrt(x * x + y * y) - empty;
// //console.log(x,y,r);
// if (r > valueAxis.min - 1 && r < valueAxis.max) {
// //console.log(r);
// setValue(categoryIndex, Math.ceil(r));
// }
// });
// set value
function setValue(index, value) {
chart.data[index].value = value;
chart.invalidateRawData();
}
// categoryAxis
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
// categoryAxis.renderer.lebels.template.background = 'black';
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.labels.template.bent = true;
categoryAxis.renderer.labels.template.padding(0, 0, 0, 0);
categoryAxis.renderer.labels.template.fill = am4core.color("#414042");
// categoryAxis.renderer.fill = am4core.color('red')
categoryAxis.renderer.labels.template.disabled = true; //hide label name
categoryAxis.renderer.grid.template.strokeDasharray = "1,2"
categoryAxis.renderer.labels.template.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(-3.8).y;
});
categoryAxis.tooltip.defaultState.properties.opacity = 0.; // hide tooltip
/*categoryAxis.renderer.axisFills.template.disabled = false;
categoryAxis.renderer.axisFills.template.fillOpacity = 1;
categoryAxis.renderer.axisFills.template.fill = am4core.color("#e7e8e8");
*/
// valueAxis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
//valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.labels.template.fill = am4core.color("#414042");
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.renderer.minGridDistance = 10;
valueAxis.fontSize = '10px';
// valueAxis.renderer.labels.template.adapter.add("dy", (innerRadius, target) => {
// return -valueAxis.valueToPoint(-3.7).y;
// });
// series
var series = chart.series.push(new am4charts.RadarColumnSeries());
series.columns.template.width = am4core.percent(100);
series.columns.template.strokeWidth = 0;
series.columns.template.column.propertyFields.fill = "color";
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
// series tootltip
series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#f7aa00");
series.tooltip.label.fill = am4core.color("#414042");
series.tooltip.label.fontWeight = 'bold';
series.tooltip.background.strokeOpacity = 0;
// center image
var image = categoryAxis.createChild(am4core.Image);
image.horizontalCenter = "middle";
image.verticalCenter = "middle";
image.href = "https://happimynd.com/images/icons/icon-512x512.png";
image.width = am4core.percent(23);
image.height = am4core.percent(23);
// image.zIndex = 1; // grid over series
var circle = chart.seriesContainer.createChild(am4core.Circle);
circle.horizontalCenter = "middle";
circle.verticalCenter = "middle";
circle.fill = am4core.color('#e7e8e8');
circle.zIndex = -5; // grid over seriesd
categoryAxis.events.on('sizechanged', (ev) => {
circle.radius = -valueAxis.valueToPoint(11.5).y;
});
function generateRadarData() {
let data = [];
for (let i in wheel_data) {
// capitalize
for (let t in wheel_data[i].data) {
wheel_data[i].data[t].category = wheel_data[i].data[t].category.toUpperCase();
}
data = data.concat(wheel_data[i].data);
createRange(wheel_data[i].range, wheel_data[i].data, i);
}
//console.log(data);
return data;
}
function createRange(name, data, index) {
let axisRange = categoryAxis.axisRanges.create();
axisRange.text = name.toUpperCase();
// first country
axisRange.category = data[0].category;
// last country
axisRange.endCategory = data[data.length - 1].category;
// range grid
//axisRange.grid.disabled = true;
axisRange.label.mouseEnabled = false;
axisRange.grid.stroke = am4core.color("#FFFFFF");
axisRange.grid.strokeWidth = 1;
axisRange.grid.strokeOpacity = 1;
axisRange.grid.strokeDasharray = "0,0";
axisRange.grid.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(13.8).y;
});
// range background
let axisFill = axisRange.axisFill;
axisFill.fill = data[0].color; // chart.colors.next
axisFill.disabled = false;
axisFill.fillOpacity = 1;
axisFill.adapter.add("innerRadius", (innerRadius, target) => {
return -valueAxis.valueToPoint(11.5).y;
});
axisFill.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(13.8).y;
});
//axisFill.togglable = true;
//axisFill.showSystemTooltip = true;
//axisFill.readerTitle = "click to zoom";
//axisFill.cursorOverStyle = am4core.MouseCursorStyle.pointer;
// range label
let axisLabel = axisRange.label;
axisLabel.location = 0.5;
axisLabel.fill = am4core.color("#414042");
axisLabel.fontWeight = 'bold';
axisLabel.fontSize = '10px';
axisLabel.adapter.add("radius", (innerRadius, target) => {
return -valueAxis.valueToPoint(-1.9).y;
});
}
chart.data = generateRadarData();
});
#amchart_wheel_of_life {
width: 100%;
height: 98vh;
font-family:arial;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="amchart_wheel_of_life"></div>
https://codepen.io/omar630/pen/YzZVVGr