Radar series
While radar series resemble their equivalents in XY chart in how they are configured, there are some differences. This tutorial will address those.
Connecting ends
Section titled “Connecting ends”Line-based series like RadarLineSeries and SmoothedRadarLineSeries will automatically connect their first and last data points to complete the circle.
We can disable this behavior using series’ connectEnds setting:
let series = chart.series.push( am5radar.RadarLineSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", connectEnds: false }));var series = chart.series.push( am5radar.RadarLineSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", connectEnds: false }));
connectEnds: true (default)
connectEnds: false/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root and chartvar root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);
var chart = root.container.children.push( am5radar.RadarChart.new(root, { wheelY: "zoomX", layout: root.horizontalLayout, radius: am5.percent(90), innerRadius: am5.percent(40) }));
// Define datavar data = [ { date: new Date(2021, 0, 1).getTime(), value: 100 }, { date: new Date(2021, 0, 2).getTime(), value: 320 }, { date: new Date(2021, 0, 3).getTime(), value: 216 }, { date: new Date(2021, 0, 4).getTime(), value: 150 }, { date: new Date(2021, 0, 5).getTime(), value: 156 }, { date: new Date(2021, 0, 6).getTime(), value: 199 }, { date: new Date(2021, 0, 7).getTime(), value: 114 }, { date: new Date(2021, 0, 8).getTime(), value: 269 }, { date: new Date(2021, 0, 9).getTime(), value: 190 }, { date: new Date(2021, 0, 10).getTime(), value: 380 }, { date: new Date(2021, 0, 11).getTime(), value: 250 }, { date: new Date(2021, 0, 12).getTime(), value: 110 }, { date: new Date(2021, 0, 13).getTime(), value: 185 }, { date: new Date(2021, 0, 14).getTime(), value: 105 }];
// Create Y-axisvar yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { extraTooltipPrecision: 1, renderer: am5radar.AxisRendererRadial.new(root, { minGridDistance: 20, gridType: "polygons" }) }));
yAxis.get("renderer").labels.template.setAll({ visible: false});
// Create X-Axislet xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "day", count: 1 }, renderer: am5radar.AxisRendererCircular.new(root, { minGridDistance: 20, cellStartLocation: 0.2, cellEndLocation: 0.8 }) }));
xAxis.get("renderer").labels.template.setAll({ fontSize: 12});
// Create seriesfunction createSeries(name, field) { var series = chart.series.push( am5radar.RadarLineSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueYField: field, valueXField: "date", tooltip: am5.Tooltip.new(root, {}), connectEnds: false }) );
series.strokes.template.setAll({ strokeWidth: 3 });
series.get("tooltip").label.set("text", "[bold]{name}[/]\n{valueX.formatDate()}: {valueY}"); series.data.setAll(data);}
createSeries("Series #1", "value");
// Add cursorchart.set( "cursor", am5radar.RadarCursor.new(root, { behavior: "zoomX", xAxis: xAxis }));
xAxis.set( "tooltip", am5.Tooltip.new(root, { themeTags: ["axis"] }));
yAxis.set( "tooltip", am5.Tooltip.new(root, { themeTags: ["axis"] }));<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: 400px;}{ "type": "RadarChart", "settings": { "wheelY": "zoomX", "layout": { "type": "HorizontalLayout" }, "radius": { "type": "Percent", "value": 90 }, "innerRadius": { "type": "Percent", "value": 40 }, "cursor": { "type": "RadarCursor", "settings": { "behavior": "zoomX", "xAxis": "#axis-0" } } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "refs": [ { "data-0": [ { "date": 1609452000000, "value": 100 }, { "date": 1609538400000, "value": 320 }, { "date": 1609624800000, "value": 216 }, { "date": 1609711200000, "value": 150 }, { "date": 1609797600000, "value": 156 }, { "date": 1609884000000, "value": 199 }, { "date": 1609970400000, "value": 114 }, { "date": 1610056800000, "value": 269 }, { "date": 1610143200000, "value": 190 }, { "date": 1610229600000, "value": 380 }, { "date": 1610316000000, "value": 250 }, { "date": 1610402400000, "value": 110 }, { "date": 1610488800000, "value": 185 }, { "date": 1610575200000, "value": 105 } ] }, { "axis-0": { "type": "DateAxis", "settings": { "baseInterval": { "timeUnit": "day", "count": 1 }, "renderer": { "type": "AxisRendererCircular", "settings": { "minGridDistance": 20, "cellStartLocation": 0.2, "cellEndLocation": 0.8 }, "properties": { "labels": { "properties": { "template": { "settings": { "fontSize": 12 } } } } } }, "tooltip": { "type": "Tooltip", "settings": { "themeTags": [ "axis" ] } } } } }, { "axis-1": { "type": "ValueAxis", "settings": { "extraTooltipPrecision": 1, "renderer": { "type": "AxisRendererRadial", "settings": { "minGridDistance": 20, "gridType": "polygons" }, "properties": { "labels": { "properties": { "template": { "settings": { "visible": false } } } } } }, "tooltip": { "type": "Tooltip", "settings": { "themeTags": [ "axis" ] } } } } }, { "series-0": { "type": "RadarLineSeries", "settings": { "name": "Series #1", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueYField": "value", "valueXField": "date", "tooltip": { "type": "Tooltip" }, "connectEnds": false }, "properties": { "data": "#data-0", "strokes": { "properties": { "template": { "settings": { "strokeWidth": 3 } } } } } } } ]}disabling-radar-line-series-end-connection