amChart 日期轴偏移

Question

The axis label for a time and the data point on the graph don't line up, see picture for best explanation

Anyone know how to fix this?

 const ratingTrendChart = am4core.create("chart", am4charts.XYChart); ratingTrendChart.legend = new am4charts.Legend(); ratingTrendChart.legend.useDefaultMarker = true; const marker = ratingTrendChart.legend.markers.template.children.getIndex(0); marker.cornerRadius(6, 6, 6, 6); marker.height = 12; ratingTrendChart.legend.markers.template.height = 12; ratingTrendChart.legend.labels.template.text = "[{color}]{name}[/]"; ratingTrendChart.legend.labels.template.fontSize = 12; ratingTrendChart.legend.paddingBottom = 0; ratingTrendChart.legend.contentAlign = "left"; ratingTrendChart.numberFormatter.numberFormat = "#.00"; const dateAxis = ratingTrendChart.xAxes.push(new am4charts.DateAxis()); const valueAxis = ratingTrendChart.yAxes.push(new am4charts.ValueAxis()); // Add vertical scrollbar ratingTrendChart.scrollbarY = new am4core.Scrollbar(); ratingTrendChart.scrollbarY.marginLeft = 15; // Add cursor ratingTrendChart.cursor = new am4charts.XYCursor(); ratingTrendChart.cursor.behavior = "zoomY"; ratingTrendChart.cursor.lineX.disabled = true; ratingTrendChart.cursor.xAxis = dateAxis; ratingTrendChart.cursor.yAxis = valueAxis; valueAxis.min = 1; valueAxis.max = 5; valueAxis.strictMinMax = true; valueAxis.keepSelection = true; dateAxis.baseInterval = { timeUnit: "week", count: 1 } const data = [ { "date": new Date("2021-02-05T07:00:00.000Z"), "safety":2.333333, "facility":2.333333, "staff":2.333333, "Overall":2.666666, "satisfied":3.666666 }, { "date": new Date("2021-02-12T07:00:00.000Z"), "satisfied":4.333333, "safety":4.5, "Overall":4.571428, "facility":5, "staff":5}, { "date": new Date("2021-02-19T07:00:00.000Z"), "staff":1, "satisfied":3, "Overall":3.5, "safety":5, "facility":5 } ]; ratingTrendChart.data = data; const names = ["safety","facility","staff","Overall","satisfied"]; names.forEach(q => { let s = ratingTrendChart.series.push(new am4charts.LineSeries()); s.dataFields.valueY = q; s.name = q; s.dataFields.dateX = 'date'; s.tooltipText = "{name}: [bold]{valueY}[/]"; let bullet = s.bullets.push(new am4charts.Bullet()); let circle = bullet.createChild(am4core.Circle); circle.width = 5; circle.height = 5; circle.fill = am4core.color("white"); });

 #chart { height: 400px; width: 700px; }

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script> <script src="https://cdn.amcharts.com/lib/4/lang/de_DE.js"></script> <script src="https://cdn.amcharts.com/lib/4/geodata/germanyLow.js"></script> <script src="https://cdn.amcharts.com/lib/4/fonts/notosans-sc.js"></script> <div id="chart"> <div>

Updated with code snippet. This is almost exactly the code I am using, just replaced the data call with hard coded data.

SO won't let me submit this without more text... so disregard but just going to ramble a bit here.

Answer 1

Option 1: Data Points on Grids

dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.grid.template.location = 0.5;

Demo: https://jsfiddle.net/m40tLbof/

Option 2: Data Points between Grids

dateAxis.renderer.labels.template.location = 0.5;

Demo: https://jsfiddle.net/m40tLbof/1/