Stock calendar

In this article, we will build a stock calendar demo, that is an area stock chart integrated with a calendar and a stock prices display. The result is shown in the demo below:

Let’s see how to create a stock calendar demo.

For this demo, we use jQuery Datepicker to manage the calendar, as it is ready to use out of the box and can be opened automatically right after the page is loaded, where the browser’s default picker requires a user’s action to be displayed. Of course, you can use any other date picker.
The stock prices display is just a simple HTML output area.
Both the Datepicker and the HTML output area are displayed outside of the chart’s container.

The stock prices display is just a simple HTML output area.
Both the Datepicker and the HTML output area are displayed outside of the chart’s container.

We use an area series type to display our random data set stored in the data array. By default, this series displays only one y data on the chart. In our case, we would like to show all the open, high, low, and close values. To map them, we use the series.keys property:
keys: ['x', 'custom.open', 'custom.high', 'custom.low', 'y']. Now, we can access all the values directly from point:

openCell.innerText = point.custom.open.toFixed(2) + '$';
highCell.innerText = point.custom.high.toFixed(2) + '$';
lowCell.innerText = point.custom.low.toFixed(2) + '$';
closeCell.innerText = point.y.toFixed(2) + '$';

To show all the points values on hover in the stock prices display, we use the mouseOver event. Additionally, we highlight the hovered date in the Datepicker and render a red plotLine on the area chart:

const showDataInfo = (chart, point, date) => {
  const plotLinesAndBands = chart.xAxis[0].plotLinesAndBands;

  if (plotLinesAndBands && plotLinesAndBands.length) {
    plotLinesAndBands[0].destroy();
  }

  chart.xAxis[0].addPlotLine({
    value: date,
    color: 'red',
    lineWidth: 3
  });

  openCell.innerText = point.custom.open.toFixed(2) + '$';
  highCell.innerText = point.custom.high.toFixed(2) + '$';
  lowCell.innerText = point.custom.low.toFixed(2) + '$';
  closeCell.innerText = point.y.toFixed(2) + '$';
};

Remark
Use the destroy and add AP to remove and create plot line, respectively.

Now let’s add logic for the jQuery Datepicker – clicking on a specific date will find the point with a corresponding x value, center it on a graph, and display all the info mentioned above.

$('#date-picker').datepicker({
  beforeShowDay: $.datepicker.noWeekends,
  // First available date
  minDate: -Math.ceil(lastX - firstX) / DAY - 1,
  maxDate: -1 // today
});
$.datepicker.setDefaults({
  // Set the datepicker's date format
  dateFormat: 'yy-mm-dd',
  onSelect: function(dateText) {
    const clickedDateStr = dateText.split('-'),
      clickedDate = Date.UTC(clickedDateStr[0], clickedDateStr[1] - 1, clickedDateStr[2]);

    // Show 20 points on the graph
    chart.xAxis[0].setExtremes(
      clickedDate - DAY * 10,
      clickedDate + DAY * 10
    );
    const points = chart.series[0].points;
    let point;
    for (let i in points) {
      if (dateFormat('%Y-%m-%d', points[i].x) === dateText) {
        point = points[i];
        break;
      }
    }
    if (point) {
      showDataInfo(chart, point, clickedDate);
    }
  }
});

Remark
Use the setExtremes API to set the axes minimum and maximum after render.

And this is it! Now you know how to create a practical area stock chart with a date picker and a stock prices display.
Feel free to share with us your thoughts and comment in the comment section below.