Develop Reference

How to outline a stacked bar chart in amCharts 4?

I'm currently using a Stacked XYChart in amCharts 4, and I'm only displaying a single bar:
I'm trying to figure out how to get an outline around the entire bar - something like this:
I've tried adding the stroke (and strokeWidth & strokeOpacity) property to just about everything - the series, the yAxes, xAxes, etc, but none of them produce the result I'm hoping for. I feel like there's something obvious I'm missing, so any help would be greatly appreciated.

Since you mentioned that you're only displaying one column and assuming this is a 100% stacked chart, the best you can do is set a stroke on the chart's plotContainer:
chart.plotContainer.stroke = "#000000"
Note that your series columns need to have their height set 100% so it will fully expand inside the container (series.columns.template.height = am4core.percent(100)).
Demo below:
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"year": "2016",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}];
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.plotContainer.stroke = "#000000";
chart.plotContainer.strokeWidth = 5;
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.opacity = 0;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.calculateTotals = true;
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.dataFields.valueXShow = "totalPercent";
series.stacked = true;
series.name = name;
series.columns.template.height = am4core.percent(100);
}
createSeries("europe", "Europe");
createSeries("namerica", "North America");
createSeries("asia", "Asia");
createSeries("lamerica", "Latin America");
createSeries("meast", "Middle East");
createSeries("africa", "Africa");
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: 200px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

I think this is what we can achieve. It won't give continuous stroke as per your requirement.
You might have tried this.
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.stacked = true;
series.name = name;
series.stroke = am4core.color("#000");
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.locationX = 0.5;
labelBullet.label.text = "{valueX}";
labelBullet.label.fill = am4core.color("#fff");
}
Code base - https://jsfiddle.net/sarunuk/dyohfr68/1/

Left align pie chart (amCharts)

I am using amcharts to render a simple pie chart and I would like the pie chart to start on the left most edge of the container.
I have gone through the amcharts API but nothing seems to do what I need.
Below you can see the code I am using and an image of what I get (With some red lines drawn on of what I want
am4core.useTheme(am4themes_animated);
// Themes end
var data = [
{
revenueSource: "Fee Revenue",
value: 356
},
{
revenueSource: "Retail Revenue",
value: 247
},
{
revenueSource: "Ticket Revenue",
value: 9876
}
];
var chart1 = am4core.create("chartdiv", am4charts.PieChart);
chart1.hiddenState.properties.opacity = 0;
chart1.data = data;
chart1.innerRadius = am4core.percent(50);
chart1.legend = new am4charts.Legend();
chart1.legend.position = "right";
var series1 = chart1.series.push(new am4charts.PieSeries());
series1.dataFields.value = "value";
series1.dataFields.category = "revenueSource";
series1.ticks.template.disabled = true;
series1.labels.template.disabled = true;
Note. The div that the chart renders within has a height of 400px and a width of 100%

chart1.seriesContainer.align = "left";
Should do the job.

Restricting 0 or null value in am4charts LabelBullet in Column chart

I'm using Column chart in am4charts , From ajax call I'm rendering the chart.
I'm also adding LabelBullet to display the value of each bars in labels, but sometimes the result for a particular bar will be 0 or null. In that scenario I cannot able to handle the labels popping out for empty values.
I will post both the scenario, please help to restrict the 0 or null values.
fiddle without adding labels :
https://jsfiddle.net/Knavaneeth/89xz0yok/1/
var chart_data = [
{vendor: "Amazon", price: 21.67},
{vendor: "Cimandis", price: 0},
{vendor: "Co-op", price: 0},
{vendor: "easenmyne", price: 0},
{vendor: "La Collette", price: 25.92},
{vendor: "M&S", price: 0},
{vendor: "Morrisons", price: 0},
{vendor: "Tescos", price: 0},
{vendor: "tesst", price: 0},
{vendor: "Valley Foods", price: 0},
{vendor: "Waitrose", price: 0}
];
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("amcharts_chart_price_compare_div", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = chart_data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "vendor";
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 200;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "vendor";
series.dataFields.valueY = "price";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;
fiddle adding labels :
https://jsfiddle.net/Knavaneeth/6eub51cz/1/
var chart_data = [
{vendor: "Amazon", price: 21.67},
{vendor: "Cimandis", price: 0},
{vendor: "Co-op", price: 0},
{vendor: "easenmyne", price: 0},
{vendor: "La Collette", price: 25.92},
{vendor: "M&S", price: 0},
{vendor: "Morrisons", price: 0},
{vendor: "Tescos", price: 0},
{vendor: "tesst", price: 0},
{vendor: "Valley Foods", price: 0},
{vendor: "Waitrose", price: 0}
];
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("amcharts_chart_price_compare_div", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = chart_data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "vendor";
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 200;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "vendor";
series.dataFields.valueY = "price";
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;
chart.series.each(series => {
console.log(series);
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.setStateOnChildren = true;
labelBullet.label.text = "{vendor}\n[bold font-size: 20]{price}[/]";
labelBullet.label.maxWidth = 75;
labelBullet.label.wrap = true;
labelBullet.label.truncate = false;
labelBullet.label.textAlign = "middle";
labelBullet.label.padding(5, 5, 5, 5);
labelBullet.label.fill = am4core.color("#000");
const background = new am4core.RoundedRectangle();
background.cornerRadius(3, 3, 3, 3);
labelBullet.label.background = background;
labelBullet.label.background.fill = series.fill;
labelBullet.label.background.fillOpacity = 0.9;
labelBullet.label.background.stroke = am4core.color("#fff");
labelBullet.label.background.strokeOpacity = 1;
});
Finally I need a solution to display the labels in the chart only if has the values, 0 or other values should not be displayed.

You can set the Tooltip directly on the series and not only to the columns:
series.tooltipText = "{valueY.value}";
After that you need to add a Cursor to your chart, which controls the Tooltips:
chart.cursor = new am4charts.XYCursor();
You can disable all the other axis tooltips, and cursor lines by using the following snippet:
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
valueAxis.tooltip.disabled = true;
categoryAxis.tooltip.disabled = true;
At the end you may want to consider using the following to make the Tooltips show at the top of the column:
series.tooltip.pointerOrientation = "vertical";
Here is a code pen showing the final result.
To hide the LabelBullets for the zero values you can use an Adapter for the visible property:
labelBullet.label.adapter.add('visible', (visible, target) => {
return target.dataItem.dataContext.price !== 0;
});

How to add another column to this chart?

Here is the code to show the users ranking using amCharts Javascript library.
The code's output is something like this:
As you can see there are 6 users that are ranked from 1 to 6 all aligned to the left side of the page (The first group).
Now the problem is I want to continue ranking users from 7 to 12 (Second group) and align them to the right side of the page.
Something like this one :
Unfortunately, I can't handle this.
Here is the code on CodePen.
And here is the Javascript code:
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"profileName": "John",
"slogan": "Slogan Sentence Related to Profile Name 6",
"level": "6.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"
}, {
"profileName": "Sara",
"slogan": "Slogan Sentence Related to Profile Name 5",
"level": "5.",
"income": 0,
"bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
}, {
"profileName": "Nima",
"slogan": "Slogan Sentence Related to Profile Name 4",
"level": "4.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
}, {
"profileName": "Max",
"slogan": "Slogan Sentence Related to Profile Name 3",
"level": "3.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Koen-VanGeert-circle-ScripturaEngage.png"
}, {
"profileName": "Megan",
"slogan": "Slogan Sentence Related to Profile Name 2",
"level": "2.",
"income": 0,
"bullet": "https://i1.wp.com/teacupwellness.com/wp-content/uploads/2018/03/Amanda-Blankinship-profile-circle.png?fit=300%2C300&ssl=1"
}, {
"profileName": "Inna",
"slogan": "Slogan Sentence Related to Profile Name 1",
"level": "1.",
"income": 0,
"bullet": "https://www.scripturaengage.com/wp-content/uploads/2017/05/Profile-Picture-Pauline-Suy-circle-ScripturaEngage.png"
} ];
// Chart A:
//create category axis for Names Column
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "profileName";
categoryAxis.renderer.grid.template.location = -100;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.labels.template.dy = -60;
categoryAxis.renderer.labels.template.dx = 200;
categoryAxis.labelsEnabled = false;
categoryAxis.renderer.labels.template.fontSize = 20;
categoryAxis.renderer.labels.template.fill = am4core.color("#4286f4");
//create category axis for Slogans Column
var categoryAxis2 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis2.dataFields.category = "slogan";
categoryAxis2.renderer.grid.template.location = 100;
categoryAxis2.renderer.inside = true;
categoryAxis2.renderer.labels.template.dy = -20;
categoryAxis2.renderer.labels.template.dx = 200;
categoryAxis2.renderer.labels.template.fontSize = 12;
//create category level
var categoryAxis3 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis3.dataFields.category = "level";
categoryAxis3.renderer.grid.template.location = 100;
categoryAxis3.renderer.inside = true;
categoryAxis3.renderer.labels.template.dy = -20;
categoryAxis3.renderer.labels.template.dx = 170;
categoryAxis3.renderer.labels.template.fontSize = 16;
categoryAxis3.renderer.labels.template.fill = am4core.color("#ccd3e0");
//create value axis for income and expenses
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 25;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.disabled = true;
//create columns
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "profileName";
series.dataFields.valueX = "income";
series.name = "Income";
series.columns.template.fillOpacity = 0.5;
series.columns.template.strokeOpacity = 0;
// Do not crop bullets
chart.maskBullets = false;
chart.paddingTop = 64;
chart.paddingBottom = -30;
// Add bullets
var bullet = series.bullets.push(new am4charts.Bullet());
var image = bullet.createChild(am4core.Image);
image.horizontalCenter = "middle";
image.verticalCenter = "bottom";
image.width = 120;
image.height = 120;
image.dy = 0;
image.dx = 100;
image.y = am4core.percent(100);
image.propertyFields.href = "bullet";
image.tooltipText = series.columns.template.tooltipText;
image.propertyFields.fill = "color";
image.filters.push(new am4core.DropShadowFilter());
Html code:
<!-- Resources -->
<script language="JavaScript" src="amcharts4/core.js"></script>
<script language="JavaScript" src="amcharts4/charts.js"></script>
<script language="JavaScript" src="amcharts4/themes/animated.js"></script>
<div id="chartdiv"></div>
<link rel="stylesheet" href="Style.css">
<script src="Script.js"></script>
and CSS:
#chartdiv {
width: 1500px;
height: 840px;
}
body {
margin: 40 100 100 20;
background-color: transparent;
overflow:hidden;
font-family: "Helvetica Neue";
font-weight: 800;
src: url(helveticaneue-ultrathin.woff);
}
Any suggestions are extremely appreciated...

how to make amChart column with 3 axis vertical

I want to create vertical clustered column chart using amChart with 3 axis.
I already made the horizontal design like this code shown below, my question is... how can i make this chart vertical?
As far as i know (googling), amChart can easily do this by rotating the labels. my question is... where should i put this "rotate": true ?
i'm not familiar with javascript. Anyone can help?
any help will be very much appreciate.
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"year": 2005,
"income": 23.5,
"expenses": 18.1,
"cumi" : 13
},{
"year": 2006,
"income": 26.2,
"expenses": 22.8,
"cumi" : 13
},{
"year": 2007,
"income": 30.1,
"expenses": 23.9,
"cumi" : 13
},{
"year": 2008,
"income": 29.5,
"expenses": 25.1,
"cumi" : 13
},{
"year": 2009,
"income": 24.6,
"expenses": 25,
"cumi" : 13
}];
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.numberFormatter.numberFormat = "#";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "year";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
series.columns.template.height = am4core.percent(100);
series.sequencedInterpolation = true;
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueX}";
valueLabel.label.horizontalCenter = "left";
valueLabel.label.dx = 10;
valueLabel.label.hideOversized = false;
valueLabel.label.truncate = false;
var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
categoryLabel.label.text = "{name}";
categoryLabel.label.horizontalCenter = "right";
categoryLabel.label.dx = -10;
categoryLabel.label.fill = am4core.color("#fff");
categoryLabel.label.hideOversized = false;
categoryLabel.label.truncate = false;
}
createSeries("income", "Income");
createSeries("expenses", "Expenses");
createSeries("cumi", "Cumi");
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: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

You will need to replace chart.yAxes for chart.xAxes and chart.xAxes for chart.yAxes.
Essentially CategoryAxis needs to go to xAxes and ValueAxis needs to go to yAxes.
You will also need to change valueX for valueY and categoryY for categoryX:
series.dataFields.valueY = field;
series.dataFields.categoryX = "year";
There few other changes on the example below. I recommend you to check more about axes in the documentation.
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"year": 2005,
"income": 23.5,
"expenses": 18.1,
"cumi" : 13
},{
"year": 2006,
"income": 26.2,
"expenses": 22.8,
"cumi" : 13
},{
"year": 2007,
"income": 30.1,
"expenses": 23.9,
"cumi" : 13
},{
"year": 2008,
"income": 29.5,
"expenses": 25.1,
"cumi" : 13
},{
"year": 2009,
"income": 24.6,
"expenses": 25,
"cumi" : 13
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.numberFormatter.numberFormat = "#";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = field;
series.dataFields.categoryX = "year";
series.name = name;
series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
series.columns.template.height = am4core.percent(100);
series.sequencedInterpolation = true;
var valueLabel = series.bullets.push(new am4charts.LabelBullet());
valueLabel.label.text = "{valueX}";
valueLabel.label.verticalCenter = "bottom";
valueLabel.label.dx = 10;
valueLabel.label.hideOversized = false;
valueLabel.label.truncate = false;
var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
categoryLabel.label.text = "{name}";
categoryLabel.label.verticalCenter = "top";
categoryLabel.label.dx = -10;
categoryLabel.label.hideOversized = false;
categoryLabel.label.truncate = false;
categoryLabel.label.rotation = -90;
}
createSeries("income", "Income");
createSeries("expenses", "Expenses");
createSeries("cumi", "Cumi");
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: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>