Start/end labels on scrollbar grips
This demo shows how we can add labels on top of scrollbar grips, that show dates corresponding to their current positions.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
var data = [ { date: new Date(2012, 1, 1).getTime(), value: 8 }, { date: new Date(2012, 1, 2).getTime(), value: 10 }, { date: new Date(2012, 1, 3).getTime(), value: 12 }, { date: new Date(2012, 1, 4).getTime(), value: 14 }, { date: new Date(2012, 1, 5).getTime(), value: 11 }, { date: new Date(2012, 1, 6).getTime(), value: 6 }, { date: new Date(2012, 1, 7).getTime(), value: 7 }, { date: new Date(2012, 1, 8).getTime(), value: 9 }, { date: new Date(2012, 1, 9).getTime(), value: 13 }, { date: new Date(2012, 1, 10).getTime(), value: 15 }, { date: new Date(2012, 1, 11).getTime(), value: 19 }, { date: new Date(2012, 1, 12).getTime(), value: 21 }, { date: new Date(2012, 1, 13).getTime(), value: 22 }, { date: new Date(2012, 1, 14).getTime(), value: 20 }, { date: new Date(2012, 1, 15).getTime(), value: 18 }, { date: new Date(2012, 1, 16).getTime(), value: 14 }, { date: new Date(2012, 1, 17).getTime(), value: 16 }, { date: new Date(2012, 1, 18).getTime(), value: 18 }, { date: new Date(2012, 1, 19).getTime(), value: 17 }, { date: new Date(2012, 1, 20).getTime(), value: 15 }, { date: new Date(2012, 1, 21).getTime(), value: 12 }, { date: new Date(2012, 1, 22).getTime(), value: 10 }, { date: new Date(2012, 1, 23).getTime(), value: 8 }];
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: true, panY: true, wheelX: "panX", wheelY: "zoomX" }));
var easing = am5.ease.linear;
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { maxDeviation: 0.1, groupData: false, baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {}) }));
var yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 0.1, renderer: am5xy.AxisRendererY.new(root, {}) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.LineSeries.new(root, { minBulletDistance: 10, xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "{valueY}" }) }));
series.data.setAll(data);
series.bullets.push(function () { return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 5, fill: series.get("fill"), stroke: root.interfaceColors.get("background"), strokeWidth: 2 }) });});
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { xAxis: xAxis }));
cursor.lineY.set("visible", false);
// add scrollbarvar scrollbar = chart.set( "scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
var startLabel = scrollbar.startGrip.children.push( am5.Label.new(root, { isMeasured: false, width: 100, fill: am5.color(0x000000), centerX: 50, centerY: 30, x: am5.p50, y: 0, textAlign: "center", populateText: true }));
scrollbar.on("start", function (position) { setTimeout(function () { startLabel.set("text", root.dateFormatter.format(xAxis.positionToDate(position), "MMM d")); }, 50);});
var endLabel = scrollbar.endGrip.children.push( am5.Label.new(root, { isMeasured: false, width: 100, fill: am5.color(0x000000), centerX: 50, centerY: 30, x: am5.p50, y: 0, textAlign: "center", populateText: true }));
scrollbar.on("end", function (position) { setTimeout(function () { endLabel.set("text", root.dateFormatter.format(xAxis.positionToDate(position), "MMM d")); }, 50);});
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear(1000, 100);chart.appear(1000, 100);<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: 98vh;}startend-labels-on-scrollbar-gripsHere’s another version:
Open in:New tab
// Create root and chartvar root = am5.Root.new("chartdiv");
var theme = am5.Theme.new(root);
// hides button backgroundtheme.ruleRaw("RoundedRectangle", ["background", "resize", "button"]).setAll({ fillOpacity: 0, strokeOpacity: 0});
// modify the icontheme.ruleRaw("Graphics", ["resize", "button", "icon"]).setAll({ strokeOpacity: 1, strokeWidth: 1, stroke: am5.color(0x3f48cc), fill: am5.color(0x3f48cc), draw: (display) => { display.arc(0, 0, 3, -90, 270); display.moveTo(0, 3); display.lineTo(0, 50); }});
// add custom theme to rootroot.setThemes([am5themes_Animated.new(root), theme]);
var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: true, panY: true, wheelY: "zoomX", layout: root.verticalLayout, pinchZoomX: true }));
// Create Y-axisvar yAxis = chart.yAxes.push( am5xy.ValueAxis.new(root, { maxDeviation: 1, renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" }) }));
// Create X-Axisvar xAxis = chart.xAxes.push( am5xy.DateAxis.new(root, { groupData: true, maxDeviation: 0.5, baseInterval: { timeUnit: "minute", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 60, pan: "zoom", minorGridEnabled: true }) }));
// xAxis.get("dateFormats")["day"] = "MM/dd";// xAxis.get("periodChangeDateFormats")["day"] = "MMMM";
// Generate random datafunction generateChartData() { var chartData = []; // current date var firstDate = new Date(); // now set 500 minutes back firstDate.setMinutes(firstDate.getDate() - 500, 0, 0);
// and generate 500 data items var visits = 500; for (var i = 0; i < 500; i++) { var newDate = new Date(firstDate); // each time we add one minute newDate.setMinutes(newDate.getMinutes() + i); // some random number visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10); // add data item to the array chartData.push({ date: newDate.getTime(), visits: visits }); } return chartData;}var data = generateChartData();
// Create seriesvar series = chart.series.push( am5xy.LineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "visits", valueXField: "date", tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "[bold]{name}[/]\n{valueX.formatDate()}: {valueY}" }) }));
series.strokes.template.set("strokeWidth", 2);series.fills.template.setAll({ visible: true, fillOpacity: 0.4});
series.data.setAll(data);
// Pre-zoom X axis to last hourseries.events.once("datavalidated", function (ev, target) { var lastDate = new Date(data[data.length - 1].date); var firstDate = new Date(lastDate.getTime() - 3600000); xAxis.zoomToDates(firstDate, lastDate);});
// Add cursorchart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "none", xAxis: xAxis }));
xAxis.set("tooltip", am5.Tooltip.new(root, {}));
yAxis.set("tooltip", am5.Tooltip.new(root, {}));
var scrollbarX = am5xy.XYChartScrollbar.new(root, { orientation: "horizontal", height: 50});
chart.set("scrollbarX", scrollbarX);chart.bottomAxesContainer.children.push(scrollbarX);
var sbxAxis = scrollbarX.chart.xAxes.push( am5xy.DateAxis.new(root, { baseInterval: { timeUnit: "minute", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { opposite: false, strokeOpacity: 0, minorGridEnabled: true, minGridDistance: 60 }) }));
/// THIS IS THE PART THAT ADDS LABELS TO THE SCROLLBARvar startRange = sbxAxis.axisRanges.push(sbxAxis.makeDataItem({}));var startLabel = startRange.get("label");startLabel.setAll({ maxPosition: 1, minPosition: 0, opacity: 1, paddingLeft: 0, paddingRight: 0, centerX: am5.p100, centerY: 0, fill: am5.color(0x3f48cc)});
scrollbarX.on("start", function (start) { updateRanges();});
// adjust position if label is too close to the edgestartLabel.adapters.add("dx", function (dx) { if (startLabel.x() - startLabel.width() < 0) { return -startLabel.x() + startLabel.width(); }
return 0;});
// all the same for endvar endRange = sbxAxis.axisRanges.push(sbxAxis.makeDataItem({}));var endLabel = endRange.get("label");endLabel.setAll({ maxPosition: 1, minPosition: 0, centerY: 0, opacity: 1, paddingLeft: 0, paddingRight: 0, centerX: 0, fill: am5.color(0x3f48cc)});
scrollbarX.on("end", function (end) { updateRanges();});
// adjust position if label is too close to the edgeendLabel.adapters.add("dx", function (dx) { if (endLabel.x() + endLabel.width() > scrollbarX.width()) { return scrollbarX.width() - endLabel.x() - endLabel.width(); }
return 0;});
function updateRanges() { var start = sbxAxis.positionToValue(scrollbarX.get("start")); var end = sbxAxis.positionToValue(scrollbarX.get("end"));
if (!isNaN(start) && !isNaN(end)) { if (start > end) { [start, end] = [end, start]; }
endRange.set("value", end); endLabel.set("text", sbyAxis.getDateFormatter().format(new Date(end), "YYYY-MM-dd HH:mm"));
startRange.set("value", start); startLabel.set("text", sbyAxis.getDateFormatter().format(new Date(start), "YYYY-MM-dd HH:mm")); }}
// END OF LABELS
var sbyAxis = scrollbarX.chart.yAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
var sbseries = scrollbarX.chart.series.push( am5xy.LineSeries.new(root, { xAxis: sbxAxis, yAxis: sbyAxis, valueYField: "visits", valueXField: "date" }));
sbseries.data.setAll(data);<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: 95vh;}customized-scrollbar