A radar chart of stacked columns that zooms every way: drag around the ring, scroll, or use the two scrollbars. Here, a year of website visits by where they came from.
A full circle squeezes every category into a thin slice. Zooming opens a few of them up to the whole ring: the horizontal scrollbar picks the months, the vertical one stretches the values out from the middle. The full year stays one click away, behind the zoom-out button.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Data: visits to a website per month, in thousands, by where the visitors came from
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
var data = [
{ month: "Jan", search: 42, direct: 18, social: 12, email: 6 },
{ month: "Feb", search: 45, direct: 19, social: 14, email: 7 },
{ month: "Mar", search: 51, direct: 21, social: 15, email: 9 },
{ month: "Apr", search: 48, direct: 20, social: 17, email: 8 },
{ month: "May", search: 53, direct: 22, social: 19, email: 9 },
{ month: "Jun", search: 47, direct: 20, social: 22, email: 7 },
{ month: "Jul", search: 41, direct: 17, social: 24, email: 6 },
{ month: "Aug", search: 39, direct: 16, social: 23, email: 6 },
{ month: "Sep", search: 55, direct: 23, social: 18, email: 10 },
{ month: "Oct", search: 58, direct: 24, social: 16, email: 11 },
{ month: "Nov", search: 64, direct: 27, social: 15, email: 14 },
{ month: "Dec", search: 60, direct: 25, social: 13, email: 12 }
];
// Create chart
// https://www.amcharts.com/docs/v5/charts/radar-chart/
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
panX: false, // no panning by dragging
panY: false,
wheelX: "panX", // a horizontal wheel or trackpad swipe pans...
wheelY: "zoomX" // ...and the vertical wheel zooms in on some of the months
}));
// Add cursor: dragging across the chart zooms in on the months in between
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
var cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
behavior: "zoomX"
}));
cursor.lineY.set("visible", false); // no circle following the pointer, only the line from the center
// Create axes and their renderers
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
var xRenderer = am5radar.AxisRendererCircular.new(root, {
minGridDistance: 20 // months can be 20px apart before labels are skipped
});
xRenderer.labels.template.setAll({
radius: 10 // month names 10px outside the circle
});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0, // no panning past January or December
categoryField: "month",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {}) // shows the cursor's month on the axis
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5radar.AxisRendererRadial.new(root, {})
}));
// Create series: one stacked column series per source of visits
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
function createSeries(name, field) {
var series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
stacked: true, // each source sits on top of the one before
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: field,
categoryXField: "month"
}));
series.columns.template.setAll({
tooltipText: "{name}: {valueY}k visits"
});
series.data.setAll(data);
series.appear(1000);
}
createSeries("Search", "search");
createSeries("Direct", "direct");
createSeries("Social", "social");
createSeries("Email", "email");
// Add scrollbars: the horizontal one picks months, the vertical one zooms the values
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));
xAxis.data.setAll(data);
// Animate chart
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
chart.appear(1000, 100);{
"type": "RadarChart",
"settings": {
"panX": false,
"panY": false,
"wheelX": "panX",
"wheelY": "zoomX",
"cursor": {
"type": "RadarCursor",
"settings": {
"behavior": "zoomX"
},
"properties": {
"lineY": {
"settings": {
"visible": false
}
}
}
},
"scrollbarX": {
"type": "Scrollbar",
"settings": {
"orientation": "horizontal"
}
},
"scrollbarY": {
"type": "Scrollbar",
"settings": {
"orientation": "vertical"
}
}
},
"properties": {
"series": [
"#series-0",
"#series-1",
"#series-2",
"#series-3"
],
"xAxes": [
"#axis-0"
],
"yAxes": [
"#axis-1"
]
},
"refs": [
{
"data-0": [
{
"month": "Jan",
"search": 42,
"direct": 18,
"social": 12,
"email": 6
},
{
"month": "Feb",
"search": 45,
"direct": 19,
"social": 14,
"email": 7
},
{
"month": "Mar",
"search": 51,
"direct": 21,
"social": 15,
"email": 9
},
{
"month": "Apr",
"search": 48,
"direct": 20,
"social": 17,
"email": 8
},
{
"month": "May",
"search": 53,
"direct": 22,
"social": 19,
"email": 9
},
{
"month": "Jun",
"search": 47,
"direct": 20,
"social": 22,
"email": 7
},
{
"month": "Jul",
"search": 41,
"direct": 17,
"social": 24,
"email": 6
},
{
"month": "Aug",
"search": 39,
"direct": 16,
"social": 23,
"email": 6
},
{
"month": "Sep",
"search": 55,
"direct": 23,
"social": 18,
"email": 10
},
{
"month": "Oct",
"search": 58,
"direct": 24,
"social": 16,
"email": 11
},
{
"month": "Nov",
"search": 64,
"direct": 27,
"social": 15,
"email": 14
},
{
"month": "Dec",
"search": 60,
"direct": 25,
"social": 13,
"email": 12
}
]
},
{
"axis-0": {
"type": "CategoryAxis",
"settings": {
"maxDeviation": 0,
"categoryField": "month",
"renderer": {
"type": "AxisRendererCircular",
"settings": {
"minGridDistance": 20
},
"properties": {
"labels": {
"properties": {
"template": {
"settings": {
"radius": 10
}
}
}
}
}
},
"tooltip": {
"type": "Tooltip"
}
},
"properties": {
"data": "#data-0"
}
}
},
{
"axis-1": {
"type": "ValueAxis",
"settings": {
"renderer": {
"type": "AxisRendererRadial"
}
}
}
},
{
"series-0": {
"type": "RadarColumnSeries",
"settings": {
"stacked": true,
"name": "Search",
"xAxis": "#axis-0",
"yAxis": "#axis-1",
"valueYField": "search",
"categoryXField": "month"
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": {
"settings": {
"tooltipText": "{name}: {valueY}k visits"
}
}
}
}
}
}
},
{
"series-1": {
"type": "RadarColumnSeries",
"settings": {
"stacked": true,
"name": "Direct",
"xAxis": "#axis-0",
"yAxis": "#axis-1",
"valueYField": "direct",
"categoryXField": "month"
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": {
"settings": {
"tooltipText": "{name}: {valueY}k visits"
}
}
}
}
}
}
},
{
"series-2": {
"type": "RadarColumnSeries",
"settings": {
"stacked": true,
"name": "Social",
"xAxis": "#axis-0",
"yAxis": "#axis-1",
"valueYField": "social",
"categoryXField": "month"
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": {
"settings": {
"tooltipText": "{name}: {valueY}k visits"
}
}
}
}
}
}
},
{
"series-3": {
"type": "RadarColumnSeries",
"settings": {
"stacked": true,
"name": "Email",
"xAxis": "#axis-0",
"yAxis": "#axis-1",
"valueYField": "email",
"categoryXField": "month"
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": {
"settings": {
"tooltipText": "{name}: {valueY}k visits"
}
}
}
}
}
}
}
]
}
