I am trying to remove the Y-axis from my graph. I managed to remove the X-axis. The reason for removing the Y-axis is because the graph is going to be displayed in a small area.
This is what I have right now:
I removed the Y-Axis on the image. This is what I try to achieve:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>visits_per_week_last_2_years</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="chartdiv_visits_per_week_last_two_years" style="width: 100%;height: 80vh;"></div>
<script src="../../_admin/_javascripts/amcharts/index.js"></script>
<script src="../../_admin/_javascripts/amcharts/xy.js"></script>
<script src="../../_admin/_javascripts/amcharts/themes/Animated.js"></script>
<script src="visits_per_week_last_2_years_K7MRCJnv8nRrBIMGVNkZ.js"></script>
</body>
</html>
Javascript:
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var rootA = am5.Root.new("chartdiv_visits_per_week_last_two_years");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
rootA.setThemes([
am5themes_Animated.new(rootA)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
panX: false,
panY: false,
layout: rootA.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
// var legendA = chartA.children.push(
// am5.Legend.new(rootA, {
// centerX: am5.p50,
// x: am5.p50
// })
// );
// Set data
var data = [{
xlabelXYChart: "6",
value1: 2,
value2: 0
},{
xlabelXYChart: "10",
value1: 1,
value2: 0
},{
xlabelXYChart: "14",
value1: 1,
value2: 0
}]
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, {
categoryField: "xlabelXYChart",
renderer: am5xy.AxisRendererX.new(rootA, {
cellStartLocation: 0.1,
cellEndLocation: 0.9
}),
tooltip: am5.Tooltip.new(rootA, {})
}));
xAxis.data.setAll(data);
var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
renderer: am5xy.AxisRendererY.new(rootA, {})
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName) {
var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "xlabelXYChart"
}));
series.columns.template.setAll({
tooltipText: "{categoryX} {name}: {valueY}",
width: am5.percent(90),
tooltipY: 0
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(rootA, {
locationY: 0,
sprite: am5.Label.new(rootA, {
text: "{valueY}",
fill: rootA.interfaceColors.get("alternativeText"),
centerY: 0,
centerX: am5.p50,
populateText: true
})
});
});
legendA.data.push(series);
}
makeSeries("2022", "value1");
makeSeries("2021", "value2");
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
chartA.appear(1000, 100);
Thank you for your help.
Try replacing:
With this: