Force the first and last labels on axis
These two demos show how you can use events, axis ranges, and some setting combination to automatically force showing first and last labels on ValueAxisand DateAxis, even if they fall on non-equal increments, and maintain them across zooms.
Chart with two ValueAxis
Section titled “Chart with two ValueAxis”Open in:New tab
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [ { x: 9.5, y: 14, value: 3 }, { x: 5, y: 3, value: 1.52 }, { x: -9.5, y: 3, value: 0.8 }, { x: -6, y: 5, value: 1.2 }, { x: 11, y: -4, value: 2.4 }, { x: 13, y: 1, value: 1.5 }, { x: 1, y: 6, value: 2 }];
chart.padding(40, 40, 40, 40);
var valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());valueAxisX.strictMinMax = true;valueAxisX.renderer.maxLabelPosition = 0.95;valueAxisX.renderer.minLabelPosition = 0.05;
var minRangeX = valueAxisX.axisRanges.create();minRangeX.maxPosition = 1;minRangeX.minPosition = 0;
var maxRangeX = valueAxisX.axisRanges.create();maxRangeX.maxPosition = 1;maxRangeX.minPosition = 0;
valueAxisX.events.on("startendchanged", updateXLabels);valueAxisX.events.on("extremeschanged", updateXLabels);
function updateXLabels() { minRangeX.value = valueAxisX.min + valueAxisX.start * (valueAxisX.max - valueAxisX.min); minRangeX.label.text = valueAxisX.numberFormatter.format(minRangeX.value, "#.0");
maxRangeX.value = valueAxisX.min + valueAxisX.end * (valueAxisX.max - valueAxisX.min); maxRangeX.label.text = valueAxisX.numberFormatter.format(maxRangeX.value, "#.0");}
var valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());valueAxisY.strictMinMax = true;valueAxisY.renderer.maxLabelPosition = 0.95;valueAxisY.renderer.minLabelPosition = 0.05;
var minRangeY = valueAxisY.axisRanges.create();minRangeY.maxPosition = 1;minRangeY.minPosition = 0;
var maxRangeY = valueAxisY.axisRanges.create();maxRangeY.maxPosition = 1;maxRangeY.minPosition = 0;
valueAxisY.events.on("startendchanged", updateYLabels);valueAxisY.events.on("extremeschanged", updateYLabels);
function updateYLabels() { minRangeY.value = valueAxisY.min + valueAxisY.start * (valueAxisY.max - valueAxisY.min); minRangeY.label.text = valueAxisY.numberFormatter.format(minRangeY.value, "#.0");
maxRangeY.value = valueAxisY.min + valueAxisY.end * (valueAxisY.max - valueAxisY.min); maxRangeY.label.text = valueAxisY.numberFormatter.format(maxRangeY.value, "#.0");}
var series = chart.series.push(new am4charts.LineSeries());series.dataFields.valueX = "x";series.dataFields.valueY = "y";series.dataFields.value = "value";series.strokeOpacity = 0;
var bullet = series.bullets.create(am4charts.CircleBullet);series.heatRules.push({ target: bullet.circle, min: 2, max: 60, property: "radius" });
chart.cursor = new am4charts.XYCursor();chart.cursor.behavior = "zoomXY";
chart.scrollbarX = new am4core.Scrollbar();chart.scrollbarY = new am4core.Scrollbar();<div id="chartdiv"></div>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;}showing-exact-minmax-on-value-axisChart with a ValueAxis and a DateAxis
Section titled “Chart with a ValueAxis and a DateAxis”Open in:New tab
/** * --------------------------------------- * 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 beginam4core.useTheme(am4themes_animated);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = generateChartData();
// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.minGridDistance = 80;var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar 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);
// Add scrollbarchart.scrollbarX = new am4charts.XYChartScrollbar();chart.scrollbarX.series.push(series);
// Add cursorchart.cursor = new am4charts.XYCursor();chart.cursor.xAxis = dateAxis;chart.cursor.snapToSeries = series;
function generateChartData() { var chartData = []; var firstDate = new Date(); firstDate.setDate(firstDate.getDate() - 1000); var visits = 1200; for (var i = 0; i < 50; i++) { // we create date objects here. In your data, you can have date strings // and then set format of your dates using chart.dataDateFormat property, // however when possible, use date objects, as this will speed up chart rendering. var newDate = new Date(firstDate); newDate.setDate(newDate.getDate() + i);
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
chartData.push({ date: newDate, visits: visits }); } return chartData;}
// this hides regular labels close to the start/enddateAxis.renderer.minLabelPosition = 0.15;dateAxis.renderer.maxLabelPosition = 0.85;
// add rangesvar minRange = dateAxis.axisRanges.create();// this overrides minLabelPosition/maxLabelPosition so that the range labels would be visibleminRange.maxPosition = 1;minRange.minPosition = 0;minRange.label.horizontalCenter = "left";minRange.label.paddingLeft = 0;
var maxRange = dateAxis.axisRanges.create();// this overrides minLabelPosition/maxLabelPosition so that the range labels would be visiblemaxRange.maxPosition = 1;maxRange.minPosition = 0;maxRange.label.horizontalCenter = "right";maxRange.label.paddingRight = 0;
dateAxis.events.on("startendchanged", updateRangeLabels);dateAxis.events.on("extremeschanged", updateRangeLabels);
function updateRangeLabels() { minRange.value = dateAxis.min + dateAxis.start * (dateAxis.max - dateAxis.min); minRange.label.text = dateAxis.dateFormatter.format(minRange.value, "yyyy-MM-dd");
maxRange.value = dateAxis.min + dateAxis.end * (dateAxis.max - dateAxis.min); maxRange.label.text = dateAxis.dateFormatter.format(maxRange.value, "yyyy-MM-dd");}<div id="chartdiv"></div>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;}showing-exact-minmax-on-date-axis