Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = -8;
// label bullet
let labelBullet = new am4charts.LabelBullet();
series.bullets.push(labelBullet);
labelBullet.label.text = "{valueY.value.formatNumber('#.')}";
labelBullet.strokeOpacity = 0;
labelBullet.stroke = am4core.color("#dadada");
labelBullet.dy = - 20;
// series bullet
let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.stroke = am4core.color("#ffffff");
var femaleCategoryAxis = femaleChart.yAxes.push(new am4charts.CategoryAxis());
femaleCategoryAxis.renderer.opposite = true;
femaleCategoryAxis.dataFields.category = "age";
femaleCategoryAxis.renderer.grid.template.location = 0;
femaleCategoryAxis.renderer.minGridDistance = 15;
var femaleValueAxis = femaleChart.xAxes.push(new am4charts.ValueAxis());
femaleValueAxis.min = 0;
femaleValueAxis.max = 10;
femaleValueAxis.strictMinMax = true;
femaleValueAxis.numberFormatter = new am4core.NumberFormatter();
femaleValueAxis.numberFormatter.numberFormat = "#.#'%'";
femaleValueAxis.renderer.minLabelPosition = 0.01;
// Create series
var femaleSeries = femaleChart.series.push(new am4charts.ColumnSeries());
femaleSeries.dataFields.valueX = "female";
femaleSeries.dataFields.valueXShow = "percent";
femaleSeries.calculatePercent = true;
femaleSeries.fill = femaleChart.colors.getIndex(4);
femaleSeries.stroke = femaleSeries.fill;
//femaleSeries.sequencedInterpolation = true;
femaleSeries.columns.template.tooltipText = "Females, age{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)";
femaleSeries.dataFields.categoryY = "age";
femaleSeries.interpolationDuration = 1000;
var mapChart = mainContainer.createChild(am4maps.MapChart);
mapChart.projection = new am4maps.projections.AlbersUsa();
mapChart.geodata = am4geodata_usaHigh;
mapChart.zoomControl = new am4maps.ZoomControl();
mapChart.zIndex = -1;
// height of axis
valueAxis2.height = am4core.percent(35);
valueAxis2.zIndex = 3
// this makes gap between panels
valueAxis2.marginTop = 30;
valueAxis2.renderer.baseGrid.disabled = true;
valueAxis2.renderer.inside = true;
valueAxis2.renderer.labels.template.verticalCenter = "bottom";
valueAxis2.renderer.labels.template.padding(2,2,2,2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis2.renderer.fontSize = "0.8em"
valueAxis2.renderer.gridContainer.background.fill = am4core.color("#000000");
valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;
let series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;
// height of axis
valueAxis2.height = am4core.percent(20)
valueAxis2.zIndex = 1
// this makes gap between panels
valueAxis2.marginTop = 20
valueAxis2.renderer.baseGrid.disabled = true
valueAxis2.renderer.labels.template.verticalCenter = 'bottom'
valueAxis2.renderer.labels.template.padding(2, 2, 2, 2)
// valueAxis2.renderer.maxLabelPosition = 0.95
valueAxis2.renderer.fontSize = '0.8em'
// uncomment these lines to fill plot area of this axis with some color
valueAxis2.renderer.gridContainer.background.fill = interfaceColors.getFor('alternativeBackground')
valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05
let series2 = chart.series.push(new am4charts.ColumnSeries())
series2.dataFields.dateX = 'timestamp'
series2.dataFields.valueY = 'volume'
series2.dataFields.valueX = 'change'
series2.yAxis = valueAxis2
series2.tooltipText = '{valueY.value}'
series2.name = 'Volume'
series2.strokeWidth = 2
series2.heatRules.push({
'target': series2.columns.template,
'property': 'stroke',
'min': am4core.color('#dd6161'),
'max': am4core.color('#5daf34'),
'dataField': 'valueX'
})
"visits": 443
}, {
"country": "Canada",
"visits": 441
}];
let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 20;
let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.maxLabelPosition = 0.98;
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "country";
series.dataFields.valueX = "visits";
series.tooltipText = "{valueX.value}";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 1000;
series.sequencedInterpolationDelay = 100;
series.columns.template.strokeOpacity = 0;
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "panY";
// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", (fill, target) => {
return chart.colors.getIndex(target.dataItem.index);
});
"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());
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltipText = "{valueY.value}"
series.columns.template.strokeOpacity = 0;
chart.cursor = new am4charts.XYCursor();
// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", (fill, target) => {
return chart.colors.getIndex(target.dataItem.index);
});
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.interactionsEnabled = false;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minGridDistance = 20;
valueAxis.renderer.minWidth = 35;
let series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.tooltipText = "{name}: {valueY.totalPercent.formatNumber('#.00')}%";
series1.columns.template.column.strokeOpacity = 1;
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.dataFields.valueYShow = "totalPercent";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
series1.tooltip.dy = - 20;
series1.cursorHoverEnabled = false;
let bullet1 = series1.bullets.push(new am4charts.LabelBullet());
bullet1.label.text = "{valueY.totalPercent.formatNumber('#.00')}%";
bullet1.locationY = 0.5;
bullet1.label.fill = am4core.color("#ffffff");
messageslineSeries.stroke = '#fdd400';
messageslineSeries.fill = '#fdd400';
messageslineSeries.fillOpacity = 0.4;
messageslineSeries.yAxis = valueAxisMessages;
messageslineSeries.strokeWidth = 0;
messageslineSeries.tensionX = 0.77;
const valueAxisCommands = chart.yAxes.push(new am4charts.ValueAxis());
valueAxisCommands.tooltip.disabled = true;
valueAxisCommands.renderer.line.opacity = 0;
valueAxisCommands.renderer.grid.template.disabled = true;
valueAxisCommands.renderer.ticks.template.disabled = true;
valueAxisCommands.min = 0;
valueAxisCommands.renderer.disabled = true;
const commandslineSeries = chart.series.push(new am4charts.ColumnSeries());
commandslineSeries.showOnInit = false;
commandslineSeries.name = 'Befehle';
commandslineSeries.dataFields.valueY = 'chatCommands';
commandslineSeries.dataFields.categoryX = 'timestamp';
commandslineSeries.tooltipText = '[bold]{chatCommands}[/b] Befehle';
commandslineSeries.tooltip.getStrokeFromObject = true;
commandslineSeries.stroke = '#00aeae';
commandslineSeries.fill = '#00aeae';
messageslineSeries.fillOpacity = 0.4;
commandslineSeries.yAxis = valueAxisCommands;
commandslineSeries.strokeWidth = 0;
commandslineSeries.tensionX = 0.77;
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.opacity = 1;
chart.cursor.lineY.opacity = 0;
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.maskBullets = false;
let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
let yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "weekday";
xAxis.renderer.minGridDistance = 40;
yAxis.dataFields.category = "hour";
xAxis.renderer.grid.template.disabled = true;
yAxis.renderer.grid.template.disabled = true;
yAxis.renderer.inversed = true;
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "weekday";
series.dataFields.categoryY = "hour";
series.dataFields.value = "value";
series.columns.template.disabled = true;
series.sequencedInterpolation = true;
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.tooltipText = "{weekday}, {hour}: {value.workingValue.formatNumber('#.')}";
bullet.strokeWidth = 3;
bullet.stroke = am4core.color("#ffffff");
bullet.strokeOpacity = 0;
bullet.adapter.add("tooltipY", (tooltipY, target) => {
return -target.circle.radius + 1;
})
createSeries(seriesType, seriesValueX, seriesValueY, seriesName, suffix = "") {
let series;
if (seriesType === "Column") {
series = this.chart.series.push(new am4charts.ColumnSeries());
} else if (seriesType === "Line") {
series = this.chart.series.push(new am4charts.LineSeries());
} else if (seriesType === "StepLine") {
series = this.chart.series.push(new am4charts.StepLineSeries());
} else if (seriesType === "Pie") {
series = this.chart.series.push(new am4charts.PieSeries());
}
if (seriesType === "Column") {
series.dataFields.categoryX = seriesValueX;
series.dataFields.valueY = seriesValueY;
series.columns.template.tooltipText = "{valueY.value}";
series.columns.template.tooltipY = 0;
series.columns.template.strokeOpacity = 0;
} else if (seriesType === "Pie") {
series.dataFields.value = seriesValueY;