Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to adjust categoryXField and valueYField position in radar chart? #1404

Closed
photosynthesisman opened this issue Mar 13, 2024 · 4 comments
Closed
Labels

Comments

@photosynthesisman
Copy link

photosynthesisman commented Mar 13, 2024

Unfamiliar with AmCharts 5 and not fluent in English, but leaving a question here to seek assistance. Please help.

  • amCharts version is AmChart5
  • using javaScript

이미지 003

Here is my code.

function amchart_on_libload(objInst, chart_type)
{
createRadarChart();
}

function createRadarChart(){

var root = this.RadarChart_1.getroot();

// Create chart
let chart = root.container.children.push(am5radar.RadarChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX"
}));

// Add cursor
let cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
behavior: "zoomX"
}));

cursor.lineY.set("visible", false);

// Create axes and their renderers
let xRenderer = am5radar.AxisRendererCircular.new(root, {

});
xRenderer.labels.template.setAll({
textType: "adjusted",
radius: 20,

});
let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5radar.AxisRendererRadial.new(root, {}),
min: 0,
max: 100
}));

// Create series
let series = chart.series.push(am5radar.RadarLineSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "litres",
categoryXField: "country",
tooltip:am5.Tooltip.new(root, {
labelText:"{valueY}"
})
}));

series.strokes.template.setAll({
strokeWidth: 1

});

// Set data
let data = [{
"country": "Lithuania",
"litres": 100
}, {
"country": "Czechia",
"litres": 90
}, {
"country": "Ireland",
"litres": 50
}, {
"country": "Germany",
"litres": 40
}, ];
series.data.setAll(data);
xAxis.data.setAll(data);

series.appear(1000);
chart.appear(1000, 100);

}

@martynasma
Copy link
Collaborator

Please refer to this documentation on placement of axis elements:
https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#location-of-axis-elements

@photosynthesisman
Copy link
Author

I can adjust xrenderer.lables position using location:0.
but it just adjust label. I want make this chart like amchart4 radar chart demo.
h

@martynasma
Copy link
Collaborator

Here's another article you will find useful:
https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/#Data_item_location

@photosynthesisman
Copy link
Author

#Data item location
thanks to you solve this, thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants