I am using am5 charts, I want to display 10 labels on the Y axis starting from 0. I have followed the documentation but was unable to find any configuration option to change it. I tried everything but was unable to figure it out. Is there a resource or configuration I can change to make it work?
Here is my code in javascript. Please have a look.
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5xy.XYChart.new(root, {
panY: false,
wheelY: "zoomX",
layout: root.verticalLayout
})
);
// Define data
var data = [{
date: new Date(2021, 0, 1).getTime(),
value: 1000
}, {
date: new Date(2021, 0, 2).getTime(),
value: 800
}, {
date: new Date(2021, 0, 3).getTime()
// value is missing
}, {
date: new Date(2021, 0, 4).getTime(),
value: 1200
}, {
date: new Date(2021, 0, 5).getTime(),
value: 740
}];
// Craete Y-axis
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
})
);
// Create X-Axis
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
baseInterval: {
timeUnit: "day",
count: 1
},
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 20
}),
})
);
// Create series
function createSeries(name, field) {
var series = chart.series.push(
am5xy.LineSeries.new(root, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: field,
valueXField: "date",
connect: false
})
);
series.strokes.template.setAll({
strokeWidth: 3
});
series.fills.template.setAll({
fillOpacity: 0.5,
visible: true
});
series.data.setAll(data);
}
createSeries("Series with breaks", "value");