{"id":21131,"date":"2021-10-22T07:18:27","date_gmt":"2021-10-22T07:18:27","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=21131"},"modified":"2026-01-13T11:21:41","modified_gmt":"2026-01-13T11:21:41","slug":"stock-calendar","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/stock-calendar\/","title":{"rendered":"Stock calendar"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-346627ba wp-block-group-is-layout-constrained\">\n<p>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:<\/p>\n\n\n\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 500px; border: none;\" title=\"An area stock chart integrated with a calendar and a stock prices display\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/stock-calendar\"><\/iframe><\/p>\n\n\n\n<p>Let\u2019s see how to create a stock calendar demo.<\/p>\n\n\n\n<p>For this demo, we use <a href=\"https:\/\/jqueryui.com\/datepicker\/\" target=\"_blank\" rel=\"noopener\">jQuery Datepicker<\/a>  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&#8217;s default picker requires a user&#8217;s action to be displayed. Of course, you can use any other date picker.<br>The stock prices display is just a simple HTML output area.<br>Both the Datepicker and the HTML output area are displayed outside of the chart&#8217;s container.<\/p>\n\n\n\n<p>The stock prices display is just a simple HTML output area.<br>Both the Datepicker and the HTML output area are displayed outside of the chart&#8217;s container.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/api.highcharts.com\/highcharts\/series.area.keys\" target=\"_blank\" rel=\"noopener\">series.keys<\/a> property:<br>keys: <code>['x', 'custom.open', 'custom.high', 'custom.low', 'y']<\/code>. Now, we can access all the values directly from point:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>openCell.innerText = point.custom.open.toFixed(2) + '$';\nhighCell.innerText = point.custom.high.toFixed(2) + '$';\nlowCell.innerText = point.custom.low.toFixed(2) + '$';\ncloseCell.innerText = point.y.toFixed(2) + '$';<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p>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:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>const showDataInfo = (chart, point, date) => {\n  const plotLinesAndBands = chart.xAxis&#91;0].plotLinesAndBands;\n\n  if (plotLinesAndBands &amp;&amp; plotLinesAndBands.length) {\n    plotLinesAndBands&#91;0].destroy();\n  }\n\n  chart.xAxis&#91;0].addPlotLine({\n    value: date,\n    color: 'red',\n    lineWidth: 3\n  });\n\n  openCell.innerText = point.custom.open.toFixed(2) + '$';\n  highCell.innerText = point.custom.high.toFixed(2) + '$';\n  lowCell.innerText = point.custom.low.toFixed(2) + '$';\n  closeCell.innerText = point.y.toFixed(2) + '$';\n};<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><i><b>Remark<\/b><br>Use the destroy and add AP to <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.PlotLineOrBand#destroy\" target=\"_blank\" rel=\"noopener\">remove<\/a> and <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.Axis#addPlotLine\" target=\"_blank\" rel=\"noopener\">create<\/a> plot line, respectively.<\/i><\/p>\n\n\n\n<p>Now let\u2019s add logic for the jQuery Datepicker &#8211; 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.<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container attention-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>$('#date-picker').datepicker({\n  beforeShowDay: $.datepicker.noWeekends,\n  \/\/ First available date\n  minDate: -Math.ceil(lastX - firstX) \/ DAY - 1,\n  maxDate: -1 \/\/ today\n});\n$.datepicker.setDefaults({\n  \/\/ Set the datepicker's date format\n  dateFormat: 'yy-mm-dd',\n  onSelect: function(dateText) {\n    const clickedDateStr = dateText.split('-'),\n      clickedDate = Date.UTC(clickedDateStr&#91;0], clickedDateStr&#91;1] - 1, clickedDateStr&#91;2]);\n\n    \/\/ Show 20 points on the graph\n    chart.xAxis&#91;0].setExtremes(\n      clickedDate - DAY * 10,\n      clickedDate + DAY * 10\n    );\n    const points = chart.series&#91;0].points;\n    let point;\n    for (let i in points) {\n      if (dateFormat('%Y-%m-%d', points&#91;i].x) === dateText) {\n        point = points&#91;i];\n        break;\n      }\n    }\n    if (point) {\n      showDataInfo(chart, point, clickedDate);\n    }\n  }\n});<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" aria-label=\"Copy\" data-copy-code=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p><i><b>Remark<\/b><br>Use the <a href=\"https:\/\/api.highcharts.com\/class-reference\/Highcharts.Axis#setExtremes\" target=\"_blank\" rel=\"noopener\">setExtremes API<\/a> to set the axes minimum and maximum after render.<\/i><\/p>\n\n\n\n<p>And this is it! Now you know how to create a practical area stock chart with a date picker and a stock prices display.<br>Feel free to share with us your thoughts and comment in the comment section below.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a stock calendar using jQuery datepicker and Highcharts stock.<\/p>\n","protected":false},"author":266,"featured_media":21145,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[788,883,1031],"coauthors":[923],"class_list":["post-21131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-finance","tag-highcharts-stock","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/266"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=21131"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21131\/revisions"}],"predecessor-version":[{"id":28595,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21131\/revisions\/28595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21145"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=21131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=21131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=21131"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}