how to make amChart column with 3 axis vertical - javascript

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>

Related

AmCharts 4 How to display Last value at the end of LineSeries

I am using amcharts4 and trying to display last value label in a single line chart as shown in this image
Picture : last value label :
My chart's data come from an external data, .csv file
I am using code from : show-last-value-at-the-end-of-lineseries, which originally using : "function generateChartData()" as random source of data.
Everything work fine when I replace source of data, with the new code like this :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>csv read</title>
<style>
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;
background-color: #222222;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
<script id="rendered-js" >
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.dataSource.url = "./sampel.csv";
chart.dataSource.updateCurrentData = true;
chart.dataSource.reloadFrequency = 1000;
chart.dataSource.parser = new am4core.CSVParser();
chart.dataSource.parser.options.useColumnNames = true;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "visits";
series.dataFields.dateX = "date";
series.strokeWidth = 2;
series.minBulletDistance = 10;
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.cornerRadius = 20;
series.tooltip.background.fillOpacity = 0.5;
series.tooltip.label.padding(12, 12, 12, 12);
var range = valueAxis.axisRanges.create();
// range.value = chart.data[chart.data.length - 1].visits;
range.grid.stroke = am4core.color("#396478");
range.grid.strokeOpacity = 0;
range.label.text = "" + range.value;
range.label.background.fill = series.stroke;
range.label.fill = am4core.color("#fff");
range.label.padding(5, 10, 5, 10);
// Add scrollbar
// chart.scrollbarX = new am4charts.XYChartScrollbar();
// chart.scrollbarX.series.push(series);
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.cursor.snapToSeries = series;
</script>
</body>
</html>
The csv data I used are :
date,visits
10/21/2021,167
10/19/2021,145
10/18/2021,140
10/15/2021,135
10/14/2021,130
10/13/2021,125
10/12/2021,120
10/11/2021,115
10/8/2021,110
10/7/2021,105
10/6/2021,100
10/5/2021,95
I intentionally disabled the code:
// range.value = chart.data[chart.data.length - 1].visits;
,because the code can not work in external data like csv file in order to display last value data in Y axes.
Kindly need suggestion to replace it with correct code.
Thanks.

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/

JS Amcharts - Responsive relocate position of legend

JS Amcharts - Responsive relocate position of legend
How to change the position of the legend responsivly from "right" to "bottom" when let say the screen is (gets resized) smaller than 992px?
html:
<div id="chartdiv"></div>
js:
var chart = am4core.create("chartdiv", am4charts.PieChart);
chart.data = [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "The Netherlands",
"litres": 50,
"hidden": true
}];
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.dataFields.hidden = "hidden";
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 12;
chart.legend.position = "right";
chart.legend.markers.template.width = 12;
chart.legend.markers.template.height = 12;
Fiddle: https://codepen.io/anon/pen/wLEomN
You can just watch the window resize event and change the chart.legend.position according to the window width:
window.addEventListener('resize', () => {
if (window.innerWidth < 992) {
chart.legend.position = "bottom";
} else {
chart.legend.position = "right";
}
}, true);
Here I forked your code pen and added my solution.

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...

Categories

Resources