Integrating Drupal 8 REST API with Highstock

Integrating Drupal 8 REST API with Highstock

Having a hard time to find out a javascript that can help in displaying the stock and timeline charts on your web/mobile application. Recently, I was working on a Drupal project where clients requirement was to add a similar feature to their web application. While doing secondary research our team came across Highstock - a javascript library - that allows you to create general timeline charts and insert them on the website.

Have a look at what exactly is Highstock?

Highstock helps in displaying the stock and timeline charts for web/mobile application based on certain data. Highstock chart offers a wide range of features like basic navigator series, date range, date picker, scrolling bar. Still wondering how to use this feature to its fullest - integrate Drupal 8 Rest API with Highstock javascript library.

Integrating Drupal 8 REST API with Highstock javascript library.

Step 1: Create a custom module. In my case, I will be creating a module name Highstock.

Step 2: Create a file.

Step 3: Create highstock.libraries.yml file to add highstock library.

Step 4: Create Rest API Resource, which provides the input for the chart.

Highstock accept the input in the following format: It requires the array structure, within that add x-axis, y-axis data with comma separated. So while creating REST API we need to generate the output in the following format.


Step 4.1: In Drupal 8, create HighstockChart.php file inside /src/Plugin/rest/resource.

Step 5: Create a highstock_chart.js file to integrate REST API output with a highstock library.

Highstock library provides various types of charts like single line series, line with marker and shadow, spline, step line, area spline etc. You can find the types of charts here

In js, we have to call the API which gives you the JSON output. Based on type added for the chart output will be shown.

Step 6: Create a block HighstockChartBlock.php to show the chart.

Place the above block in any of your desired regions and it will display the chart like below:

Highstock Chart

Default JS provides the following properties:

  • Range selector

Range selector
  • Data range

Date range


  • Scrollbar at the bottom.

  • Right side menu icon will provide an option to Print chart, download chart in PNG, JPEG, SVG, and PDF format.

Menu bar
  • Mouse Hovering will give Marker with x-axis and y-axis highlighted.

Mouse hover chart


Properties of Highstock Chart:

Highstock javascript library provides several properties and methods to configure the chart. All these configurations can be found in highstock API reference.

GreenBook Data Solutions

Greenbook Solution

Valuebound helped Farm Journal Media’s Greenbook to provide its end users with a user-friendly interface. Greenbook caters specifically to the North American region with 800 manufacturers listing ten thousand labels. Valuebound migrated this directory based site from a legacy based system to new architecture based on Drupal 8 for easy search of information, highly categorized indexing with options like active ingredient contained, label, crop, manufacturer, pest and so on.

Farm Journal Media is America’s leading business information and media company serving the agricultural market. Started 139 years ago with the pre-eminent Farm Journal magazine, the company serves the row crop, livestock, produce and retail sectors through 26 branded websites, e-newsletters and phone apps; 11 business magazines; 70 events; six nationally broadcasted television and radio programs; a robust mobile text marketing business; and an array of data-driven paid information products. Greenbook is owned and maintained by the Farm Journal Media. For more than 30 years Greenbook has collected, maintained, and disseminated the most useful plant protection chemical dataset available. Working in direct cooperation with pesticide companies Greenbook transforms product labeling into indexed, actionable data in an unbiased presentation, that is easily accessible.

We can modify charts using those properties. I have referred to the above link and configured my charts as mentioned below:

We must add the above properties in highstock_chart.js of your custom module. After applying all properties chart will look similar to the below image.

Final Chart


This API is very handy when it comes to representing Complex Data structures to end users in the form of colorful charts. You should definitely pitch this one to the clients if they are still showing Data in traditional Tables, Excel sheet, etc. Hope now you can easily integrate Drupal 8 Rest API with Highstock. If you have any suggestions or queries please comment down let me try to answer.


comments powered by Disqus