A column chart with its axis labels turned on their side, so eleven country names fit under narrow columns without overlapping. Each column has its own color.
Long category names under narrow columns run into each other. Turning them on their side keeps every name readable without shortening it, at the cost of some height under the plot. It works for a dozen or two categories; with many more, a horizontal bar chart reads more easily.
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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true, // drag the plot sideways to pan...
panY: true, // ...or up and down
wheelX: "panX", // a horizontal wheel or trackpad swipe pans
wheelY: "zoomX", // the vertical wheel zooms in on the countries
pinchZoomX: true, // pinch to zoom on touch screens
paddingLeft: 0, // the value labels sit at the chart's left edge
// room on the right, so the last label still fits when the labels are turned to fall right (45 degrees)
paddingRight: 40
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false); // no horizontal cursor line, only the vertical one
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, {
minGridDistance: 30, // a label for every country down to 30px apart
minorGridEnabled: true // a grid line for every country, even one whose label is skipped
});
// vertical labels that read upward and end 15px below the axis
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
xRenderer.grid.template.setAll({
// draw each grid line at the end of its country's cell instead of at its start
location: 1
})
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3, // pan up to 30% of the visible range past the first and last country
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {}) // the cursor shows the country on the axis
}));
var yRenderer = am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1 // a faint axis line
})
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3, // the values can be panned 30% past their range too
// columns start at zero, so their heights compare truly
min: 0,
renderer: yRenderer
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
sequencedInterpolation: true, // the columns grow one after another
categoryXField: "country",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}" // the hovered column's value
}),
// Each column takes its own color from the series palette
colorByDataItem: true
}));
// rounded top corners, no outline
series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
// Set data
var data = [{
country: "USA",
value: 2025
}, {
country: "China",
value: 1882
}, {
country: "Japan",
value: 1809
}, {
country: "Germany",
value: 1322
}, {
country: "UK",
value: 1122
}, {
country: "France",
value: 1114
}, {
country: "India",
value: 984
}, {
country: "Spain",
value: 711
}, {
country: "Netherlands",
value: 665
}, {
country: "South Korea",
value: 443
}, {
country: "Canada",
value: 441
}];
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);{
"type": "XYChart",
"settings": {
"panX": true,
"panY": true,
"wheelX": "panX",
"wheelY": "zoomX",
"pinchZoomX": true,
"paddingLeft": 0,
"paddingRight": 40,
"cursor": {
"type": "XYCursor",
"properties": {
"lineY": {
"settings": {
"visible": false
}
}
}
}
},
"properties": {
"series": [
"#series-0"
],
"xAxes": [
"#axis-0"
],
"yAxes": [
"#axis-1"
]
},
"refs": [
{
"data-0": [
{
"country": "USA",
"value": 2025
},
{
"country": "China",
"value": 1882
},
{
"country": "Japan",
"value": 1809
},
{
"country": "Germany",
"value": 1322
},
{
"country": "UK",
"value": 1122
},
{
"country": "France",
"value": 1114
},
{
"country": "India",
"value": 984
},
{
"country": "Spain",
"value": 711
},
{
"country": "Netherlands",
"value": 665
},
{
"country": "South Korea",
"value": 443
},
{
"country": "Canada",
"value": 441
}
]
},
{
"axis-0": {
"type": "CategoryAxis",
"settings": {
"maxDeviation": 0.3,
"categoryField": "country",
"renderer": {
"type": "AxisRendererX",
"settings": {
"minGridDistance": 30,
"minorGridEnabled": true
},
"properties": {
"labels": {
"properties": {
"template": {
"settings": {
"rotation": -90,
"centerY": {
"type": "Percent",
"value": 50
},
"centerX": {
"type": "Percent",
"value": 100
},
"paddingRight": 15
}
}
}
},
"grid": {
"properties": {
"template": {
"settings": {
"location": 1
}
}
}
}
}
},
"tooltip": {
"type": "Tooltip"
}
},
"properties": {
"data": "#data-0"
}
}
},
{
"axis-1": {
"type": "ValueAxis",
"settings": {
"maxDeviation": 0.3,
"min": 0,
"renderer": {
"type": "AxisRendererY",
"settings": {
"strokeOpacity": 0.1
}
}
}
}
},
{
"series-0": {
"type": "ColumnSeries",
"settings": {
"name": "Series 1",
"xAxis": "#axis-0",
"yAxis": "#axis-1",
"valueYField": "value",
"sequencedInterpolation": true,
"categoryXField": "country",
"tooltip": {
"type": "Tooltip",
"settings": {
"labelText": "{valueY}"
}
},
"colorByDataItem": true
},
"properties": {
"data": "#data-0",
"columns": {
"properties": {
"template": {
"settings": {
"cornerRadiusTL": 5,
"cornerRadiusTR": 5,
"strokeOpacity": 0
}
}
}
}
}
}
}
]
}
