Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
value3: 6,
value4: 2,
},
{
category: 'Eight',
value1: 6,
value2: 16,
value3: 5,
value4: 1,
},
];
chart.padding(20, 20, 20, 20);
// NOTE: Not sure why the following `as any`s are needed. This code comes directly from AMCharts docs.
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis() as any);
categoryAxis.dataFields.category = 'category';
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis() as any);
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = 'left';
valueAxis.min = 0;
const series1 = chart.series.push(new am4charts.RadarColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.name = 'Series 1';
series1.dataFields.categoryX = 'category';
series1.dataFields.valueY = 'value2';
series1.stacked = true;
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}];
chart.padding(40, 40, 40, 40);
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 60;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 24000;
valueAxis.strictMinMax = true;
valueAxis.renderer.minGridDistance = 30;
valueAxis.renderer.labels.template.hiddenState.transitionDuration = 2000;
valueAxis.renderer.labels.template.defaultState.transitionDuration = 2000;
// axis break
let axisBreak = valueAxis.axisBreaks.create();
}, {
"value": 70,
"title": "Cat #3"
}]
}];
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = data;
// Create axes
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Units sold (M)";
valueAxis.min = 0;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "units";
series.dataFields.categoryX = "country";
series.tooltip.pointerOrientation = "vertical";
let columnTemplate = series.columns.template;
// add tooltip on column, not template, so that slices could also have tooltip
am4core.useTheme(am4themes_dark);
let chart = am4core.create("chartdiv", am4charts.XYChart);
// using math in the data instead of final values just to illustrate the idea of Waterfall chart
// a separate data field for step series is added because we don't need last step (notice, the last data item doesn't have stepValue)
chart.data = [
{ category: "Net revenue", value: 8786, open: 0, stepValue: 8786, color:chart.colors.getIndex(13), displayValue:8786},
{ category: "Cost of sales", value: 8786 - 2786, open: 8786, stepValue: 8786 - 2786, color:chart.colors.getIndex(8), displayValue:2786},
{ category: "Operating expenses", value: 8786 - 2786 - 1786, open: 8786 - 2786, stepValue: 8786 - 2786 - 1786, color:chart.colors.getIndex(9), displayValue:1786 },
{ category: "Amortisation", value: 8786 - 2786 - 1786 - 453, open: 8786 - 2786 - 1786, stepValue: 8786 - 2786 - 1786 - 453, color:chart.colors.getIndex(10), displayValue:453},
{ category: "Income from equity", value: 8786 - 2786 - 1786 - 453 + 1465, open: 8786 - 2786 - 1786 - 453, stepValue: 8786 - 2786 - 1786 - 453 + 1465, color:chart.colors.getIndex(16), displayValue:1465 },
{ category: "Operating income", value: 8786 - 2786 - 1786 - 453 + 1465, open: 0, color:chart.colors.getIndex(17), displayValue:8786 - 2786 - 1786 - 453 + 1465}
];
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
let columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.dataFields.categoryX = "category";
columnSeries.dataFields.valueY = "value";
columnSeries.dataFields.openValueY = "open";
columnSeries.fillOpacity = 0.8;
columnSeries.sequencedInterpolation = true;
columnSeries.interpolationDuration = 1500;
let columnTemplate = columnSeries.columns.template;
columnTemplate.strokeOpacity = 0;
columnTemplate.propertyFields.fill = "color";
"visits": 441
}];
chart.padding(40, 40, 40, 40);
chart.maskBullets = false; // allow bullets to go out of plot area
let label = chart.plotContainer.createChild(am4core.Label);
label.text = "Drag column bullet to change it's value";
label.y = 92;
label.x = am4core.percent(100);
label.horizontalCenter = "right";
label.zIndex = 100;
label.fillOpacity = 0.7;
// category axis
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.line.disabled = true;
// value axis
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// we set fixed min/max and strictMinMax to true, as otherwise value axis will adjust min/max while dragging and it won't look smooth
valueAxis.min = 0;
valueAxis.max = 3500;
valueAxis.strictMinMax = true;
valueAxis.renderer.line.disabled = true;
valueAxis.renderer.minWidth = 40;
// series
"Suk",
"Clair",
"Olivia",
"Hans",
"Glennie",
];
for (var i = 0; i < names.length; i++) {
open += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
close = open + Math.round(Math.random() * 10) + 3;
data.push({ category: names[i], open: open, close: close });
}
chart.data = data;
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 15;
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.inside = true;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeDasharray = "1,3";
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "category";
series.dataFields.openValueX = "open";
series.dataFields.valueX = "close";
series.tooltipText = "open: {openValueX.value} close: {valueX.value}";
"value3": 10,
"value4": 4
}, {
"category": "Seven",
"value1": 10,
"value2": 8,
"value3": 6,
"value4": 4
}]
chart.padding(30, 30, 10, 30);
chart.legend = new charts.Legend();
chart.colors.step = 2;
let categoryAxis = chart.xAxes.push(new charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.mouseEnabled = false;
let valueAxis = chart.yAxes.push(new charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.grid.template.strokeOpacity = 0.05;
valueAxis.renderer.minGridDistance = 20;
valueAxis.mouseEnabled = false;
valueAxis.min = 0;
valueAxis.renderer.minWidth = 35;
let series1 = chart.series.push(new charts.ColumnSeries());
series1.columns.template.width = amcharts4.percent(80);
series1.columns.template.tooltipText = "{name}: {valueY.value}";
value3: 6,
value4: 2
},
{
category: "Eight",
value1: 6,
value2: 16,
value3: 5,
value4: 1
}
];
chart.padding(20, 20, 20, 20);
chart.colors.step = 4;
let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.labels.template.horizontalCenter = "right";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.tooltipLocation = 0.5;
categoryAxis.renderer.grid.template.strokeOpacity = 0.07;
categoryAxis.interactionsEnabled = false;
let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.labels.template.horizontalCenter = "left";
valueAxis.min = 0;
valueAxis.max = 60;
valueAxis.strictMinMax = true;
valueAxis.renderer.maxLabelPosition = 0.99;
valueAxis.renderer.minGridDistance = 10;
"Suk",
"Clair",
"Olivia",
"Hans",
"Glennie",
];
for (var i = 0; i < names.length; i++) {
open += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
close = open + Math.round(Math.random() * 10) + 3;
data.push({ category: names[i], open: open, close: close });
}
chart.data = data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 15;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeDasharray = "1,3";
categoryAxis.renderer.labels.template.rotation = -90;
categoryAxis.renderer.labels.template.horizontalCenter = "left";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.inside = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
if (axisType === "ValueAxis") {
axis = this.chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.renderer.grid.template.strokeOpacity = 0.3;
} else if (axisType === "DateAxis") {
axis = this.chart.xAxes.push(new am4charts.DateAxis());
axis.dateFormats.setKey("second", "HH:mm:ss")
axis.dateFormats.setKey("minute", "HH:mm:ss")
axis.dateFormats.setKey("hour", "HH:mm")
axis.dateFormats.setKey("day", "MMM dd")
axis.periodChangeDateFormats.setKey("hour", "[bold]dd MMM HH:mm[/]");
axis.periodChangeDateFormats.setKey("day", "[bold]MMM[/] dd");
axis.periodChangeDateFormats.setKey("month", "[bold]yyyy[/] MMM");
} else if (axisType === "CategoryAxis") {
axis = this.chart.xAxes.push(new am4charts.CategoryAxis());
axis.dataFields.category = category;
axis.renderer.grid.template.location = 0;
axis.renderer.minGridDistance = 30;
axis.renderer.labels.template.horizontalCenter = "right";
axis.renderer.labels.template.verticalCenter = "middle";
axis.renderer.labels.template.rotation = 315;
axis.tooltip.disabled = true;
axis.renderer.minHeight = 110;
}
}