Amcharts 5 Separate Label into points with the same date

Question

I use AmCharts 5 and sometimes the data can come with a different value but with the same date

Result example:

[
  {"result":"AAA","date":"2022-06-09T23:00:00","value":155},
  {"result":"BBB","date":"2022-06-10T07:00:00","value":25},
  {"result":"CCC","date":"2022-06-11T07:00:00","value":85},
  {"result":"DDD","date":"2022-06-12T07:00:00","value":65},
  {"result":"EEE","date":"2022-06-12T08:00:00","value":198},
]

But when there is more than one record on the same date, it shows the points, but there is an equal Label for all points.

My code is: https://jsfiddle.net/sNniffer/9xk6q3eu/17/

I need each point to have its Label, even if they are on the same date

Answer 1

In your example, date strings are all unique!

The easiest solution here is to use hour as timeUnit in the settings of your DateAxis .

 am5.ready(function() { var root = am5.Root.new("chartdiv"); var chart = root.container.children.push(am5xy.XYChart.new(root, {})); var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "hour", // Put "hour" instead of "day" count: 1 }, renderer: am5xy.AxisRendererX.new(root, {}), tooltip: am5.Tooltip.new(root, {}) })); var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) })); var cursor = chart.set("cursor", am5xy.XYCursor.new(root, { xAxis: xAxis })); cursor.lineY.set("visible", false); var series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, categoryXField: "result", valueXField: "date", valueYField: "value", tooltip: am5.Tooltip.new(root, { labelText: "[bold]Result:[/] {categoryX}\n[bold]Date:[/] {valueX.formatDate()}\n[bold]Value:[/] {valueY}" }) })); series.fills.template.setAll({ visible: true, fillOpacity: 0.2 }); series.bullets.push(function() { return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 8, stroke: root.interfaceColors.get("background"), strokeWidth: 2, interactive: false, fill: series.get("fill") }) }); }); var data = [ {result: "AAA", date: new Date("2022-06-09T23:00:00").getTime(), value: 155}, {result: "BBB", date: new Date("2022-06-10T07:00:00").getTime(), value: 25}, {result: "CCC", date: new Date("2022-06-11T07:00:00").getTime(), value: 85}, {result: "DDD", date: new Date("2022-06-12T07:00:00").getTime(), value: 65}, {result: "EEE", date: new Date("2022-06-12T08:00:00").getTime(), value: 198} ]; series.data.setAll(data); });

 #chartdiv { width: 100%; height: 350px; }

 <script src="https://cdn.amcharts.com/lib/5/index.js"></script> <script src="https://cdn.amcharts.com/lib/5/xy.js"></script> <div id="chartdiv"></div>