Evenly Spaced Date Axis

A line chart of weekdays only: Saturdays and Sundays have no values, so the axis leaves them out and Friday sits right next to Monday, with no empty gap.

  • Try it:
  • Point at the line: Monday follows Friday
  • Click, then scroll to zoom in
Get the code JavaScript React, Vue, Angular, Svelte JSON
About this chart

Leaving out days without data

Markets, offices and schools have no figures on weekends. A normal date axis still makes room for those days, so the line runs straight across empty gaps; an evenly spaced axis gives every data point the same width and skips the rest. This demo uses the older CategoryDateAxis; for new charts, use GaplessDateAxis, which works like a regular date axis.

Good for

  • Stock prices and other trading-day data
  • Business-day figures: orders, tickets, sales
  • Series with holidays and other missing days

Think twice when

  • Gaps that mean something, like a factory shutdown: let them show
  • Readings at irregular times, like sensor data: keep a real date axis
  • Comparing durations: a long break looks as short as a weekend
For developers

Get the code.

Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.

Docs:Gapless date axisCategory date axis
// Create root element
// https://docs.amcharts.com/v5/getting-started/#root-element
var root = am5.Root.new("chartdiv");

// Set themes
// https://docs.amcharts.com/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
]);

// Create chart
// https://docs.amcharts.com/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,      // drag the plot sideways to pan
  panY: false,
  wheelX: "panX",  // a horizontal wheel or trackpad swipe pans...
  wheelY: "zoomX", // ...and the vertical wheel zooms in on the dates
  pinchZoomX:true  // pinch with two fingers to zoom on touch screens
}));

// Add cursor
// https://docs.amcharts.com/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
  behavior: "none" // a drag over the plot pans the chart instead of zooming
}));
cursor.lineY.set("visible", false); // no horizontal cursor line

// Generate random data
var date = new Date();
date.setHours(0, 0, 0, 0);
var value = 1;

// the next weekday's data point, a few points up or down from the last
function generateData() {
  value = Math.round((Math.random() * 10 - 5) + value);
  // weekdays only: step over Saturdays and Sundays, so Friday is followed by Monday
  do {
    am5.time.add(date, "day", 1);
  } while (date.getDay() == 0 || date.getDay() == 6);

  return {
    date: date.getTime(),
    value: value
  };
}

// count weekdays of data in a row
function generateDatas(count) {
  var data = [];
  for (var i = 0; i < count; ++i) {
    data.push(generateData());
  }
  return data;
}

// Create axes
// https://docs.amcharts.com/v5/charts/xy-chart/axes/
// https://docs.amcharts.com/v5/charts/xy-chart/axes/category-date-axis/
var xRenderer = am5xy.AxisRendererX.new(root, {});
// hide a label that would be cut off at either end of the axis
xRenderer.labels.template.set("minPosition", 0.01);
xRenderer.labels.template.set("maxPosition", 0.99);

// each date in the data gets an equal slot, so the skipped weekends leave no gaps
var xAxis = chart.xAxes.push(
  am5xy.CategoryDateAxis.new(root, {
    categoryField: "date",
    baseInterval: { // one category per day
      timeUnit: "day",
      count: 1
    },
    renderer: xRenderer,
    // Show the weekday in the axis tooltip, so you can see Friday is followed by Monday
    tooltipDateFormat: "EEE, MMM d",
    tooltip: am5.Tooltip.new(root, {}) // the axis tooltip, at the cursor
  })
);

var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// Add series
// https://docs.amcharts.com/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.LineSeries.new(root, {
  name: "Series",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  categoryXField: "date"
}));

var tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
tooltip.label.set("text", "{valueY}"); // the hovered value

// Add scrollbar
// https://docs.amcharts.com/v5/charts/xy-chart/scrollbars/
chart.set("scrollbarX", am5.Scrollbar.new(root, {
  orientation: "horizontal" // a scrollbar above the plot, to zoom and pan the dates
}));

// Set data
var data = generateDatas(200);
series.data.setAll(data);
xAxis.data.setAll(data);

// Make stuff animate on load
// https://docs.amcharts.com/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);

More Line & Area demos.

All Line & Area demosAll demos
No-Gap Date Axis Mixed Daily and Intra-Day Chart Date Based Data Chart with Gaps in Data