How to Convert Dates from "Dec 01" to "2024-12-01" in amCharts5?

[![this is the image for line and bar chart][1]][1] How to Convert Dates from "Dec 01" to "2024-12-01" in amCharts5?

I am using amCharts to create a dual-axis chart in Angular. The data I receive includes dates in the format Dec 01, but I need to convert these to the ISO format 2024-12-01 to use them on the X-axis of my chart.

To handle this, I used the Date.parse function to convert the dates. However, I am unsure if this is the best approach or if there is a more efficient or standard way to achieve this in JavaScript.

export function createDetectionCountChart(config: any): void {

// Create root and apply theme
createRootAndSetTheme(config);

// Create chart container
let chart = config.root.container.children.push(am5xy.XYChart.new(config.root, {
panX: false, // Disable horizontal panning
panY: false, // Disable vertical panning (remove scrolling)
wheelX: 'none', // Disable wheel zooming horizontally
wheelY: 'none', // Disable wheel zooming vertically
pinchZoomX: false, // Disable pinch zooming horizontally
pinchZoomY: false, // Disable pinch zooming vertically
layout: config.root.verticalLayout,
width: am5.percent(100), // 100% width of its container
height: am5.percent(100), // 100% height of its container
background: am5.Rectangle.new(config.root, {
fill: am5.color(getTheme() == 'dark' ? '#1b1d24' : '#fff'),
fillOpacity: 1,
}),
}));

// Set global date format for the root
config.root.dateFormatter.set("dateFormat", "yyyy-MM-dd");

// Determine theme-based colors
const labelColor = getTheme() === 'dark' ? am5.color(0xFFFFFF) : am5.color(0x000000);
const gridColor = getTheme() === 'dark' ? am5.color(0xFFFFFF) : am5.color(0x000000);
const totalCountLabelColor = '#5249eb' // Total count color
const uniqueCountLabelColor = '#36CB79' // unique labels color

const data = config.data.map((item: any) => ({
date: Date.parse(item.date),
totalCount: item.totalCount,
uniqueCount: item.uniqueCount
}));

const totalCounts = data.map(item => item.totalCount);
const uniqueCounts = data.map(item => item.uniqueCount);

const totalCountMin = Math.min(...totalCounts);
const totalCountMax = Math.max(...totalCounts);
const uniqueCountMin = Math.min(...uniqueCounts);
const uniqueCountMax = Math.max(...uniqueCounts);

// Create Date axis (X-axis)
let xAxis = chart.xAxes.push(am5xy.DateAxis.new(config.root, {
maxDeviation: 0.2,
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(config.root, {}),
tooltipDateFormat: "yyyy-MM-dd",
gridIntervals:[{timeUnit: "day", count: 1}],
dateFormats:{day:"yyyy-MM-dd", week:"yyyy-MM-dd",month:"yyyy-MM-dd",year:"yyyy-MM-dd"},
extraMin: 0,
extraMax: 0

}));

xAxis.get("renderer").labels.template.setAll({
rotation: -45,
centerX: 0.5,
centerY: 1.5,
fontSize: 10,
dx: -40,
dy: 10,
fill: labelColor,
paddingBottom: 0,
marginLeft: 0,
});

xAxis.get("renderer").grid.template.setAll({ visible: false });
xAxis.get("renderer").setAll({ maxCategoryWidth: 120 });


// Create left Y-axis (for Total Count)
let yAxisLeft = chart.yAxes.push(am5xy.ValueAxis.new(config.root, {
renderer: am5xy.AxisRendererY.new(config.root, {}),
min: totalCountMin,
max: totalCountMax,
strictMinMax: true,
numberFormat: "#a",
// logarithmic: true, // Enable logarithmic scale
// logarithmicBase: Math.E, // Set the base of the logarithm (default is 10)
extraMin: 0,
extraMax: 0 // Prevent extra space on the top and bottom of the Y-axis
}));

yAxisLeft.get("renderer").labels.template.setAll({
fontSize: 10,
fontWeight: "400",
fill: labelColor
});
yAxisLeft.get("renderer").set("minGridDistance", 20);
yAxisLeft.get("renderer").grid.template.setAll({
stroke: gridColor,
strokeWidth: 1
});

yAxisLeft.children.push(am5.Label.new(config.root, {
text: "Total Count",
fontSize: 10,
fontWeight: "normal",
fill: totalCountLabelColor,
rotation: -90, // Rotate the text to make it vertical
x: am5.percent(0), // Position at the left edge (0% of the container width)
y: am5.percent(80), // Position slightly down (10% of the container height)
dx: -20, // Add offset to the X position
dy: 0,
}));

// Create right Y-axis (for Unique Count)
let yAxisRight = chart.yAxes.push(am5xy.ValueAxis.new(config.root, {
renderer: am5xy.AxisRendererY.new(config.root, { opposite: true }),
min: uniqueCountMin,
max: uniqueCountMax,
strictMinMax: true,
// logarithmic: true, // Enable logarithmic scale
// logarithmicBase: 10, // Set the base of the logarithm (default is 10)
numberFormat: "#a",
extraMin: 0.1,
extraMax: 0.1 // Prevent extra space on the top and bottom of the Y-axis
}));

yAxisRight.get("renderer").labels.template.setAll({
fontSize: 10,
fontWeight: "400",
fill: labelColor
});

yAxisRight.get("renderer").set("minGridDistance", 20);
yAxisRight.get("renderer").grid.template.setAll({ visible: false });

yAxisRight.children.push(am5.Label.new(config.root, {
text: "Unique Count",
fontSize: 10,
fontWeight: "normal",
fill: uniqueCountLabelColor,
rotation: -90, // Vertical text
x: am5.percent(0), // Position at the right edge (100% of the container width)
y: am5.percent(90), // Position slightly up (90% of the container height)
dx: 27.5, // Adjust X offset for rightward position
dy: -20, // Adjust Y offset for upward position
}));

// Add Total Count series (Bar chart)
let totalCountSeries = chart.series.push(am5xy.ColumnSeries.new(config.root, {
name: "Total Count",
xAxis: xAxis,
yAxis: yAxisLeft,
valueYField: "totalCount",
valueXField: "date",
clustered: false
}));
totalCountSeries.columns.template.setAll({ fill: am5.color('#5249eb'), width: am5.percent(40),tooltipText: "{valueY}" });

// Add Unique Count series (Line chart)
let uniqueCountSeries = chart.series.push(am5xy.LineSeries.new(config.root, {
name: "Unique Count",
xAxis: xAxis,
yAxis: yAxisRight,
valueYField: "uniqueCount",
valueXField: "date",
stroke: am5.color('#36CB79'), // line color
fill: am5.color('#36CB79') //
}));
uniqueCountSeries.strokes.template.setAll({ strokeWidth: 2, tooltipText: "{valueY}" });
uniqueCountSeries.bullets.push(() => am5.Bullet.new(config.root, {
sprite: am5.Circle.new(config.root, { radius: 5, fill: am5.color('#36CB79'), tooltipText: "{valueY}" })
}));

// Set data for series
totalCountSeries.data.setAll(data);
uniqueCountSeries.data.setAll(data);

// Add legend
let legend = chart.children.push(am5.Legend.new(config.root, {
useDefaultMarker: true,
paddingLeft: 30
}));
legend.markers.template.setAll({
width: 10,
height: 10
});
legend.labels.template.setAll({
fontSize: 10,
fontWeight: "400",
fill: labelColor
});

legend.data.setAll([totalCountSeries, uniqueCountSeries]);
}[![enter image description here][3]][3]


[1]: https://i.sstatic.net/iVtIofj8.png
[2]: https://i.sstatic.net/4ac01STL.png
[3]: https://i.sstatic.net/DaTkmbb4.png

Continue reading...