Cookie icon
We use third-party cookies in order to personalize your site experience.
Accept necessaryCookie policy
Drupal
・
6 min read
・
Last update on
Posted on
March 19, 2025

Visualizing data in Drupal with highcharts

Visualizing data in Drupal with highcharts
Table of contents

Introduction

Data visualization adds meaning to numbers and trends, simplifying the reading of difficult sets of data. Picture a Drupal site showing raw statistics—without visualization, the statistics could be daunting. 

Highcharts, an adaptable JavaScript charting library, converts that data into dynamic and interactive charts, making patterns stand out and insights deeper.

Consider a nonprofit tracking donations over the years, a university mapping student composition, or the newsroom display of election votes. All become effortless, dynamic, and helpful with Highcharts embedded in Drupal. Users get to interact, analyze trends, and even spot real-time results—all within website content.

This blog steps through the process of how to integrate Highcharts with Drupal, from initializing the required modules through to displaying customized charts that flex to suit your data requirements.

Highcharts

Highcharts make complex data more approachable by transforming numbers into interactive visuals that are easy to grasp.

These charts help users spot patterns and make informed decisions without sifting through raw data.

Types of Charts
‍

  • Line Charts: useful for tracking progress over time, such as website traffic or monthly revenue.
  • Bar Charts: great for comparing different categories, like sales performance across multiple regions.
  • Pie Charts: show proportions at a glance, such as how different marketing channels contribute to conversions.
  • More: scatter plots, area charts, and a range of advanced options offer even deeper insights.

Here are some specific issues it addresses:
‍

  1. Enhanced data visualization: Drupal websites often need to display data meaningfully. Highcharts provides a wide variety of chart types that can be embedded directly into Drupal content, making it easier to represent data visually.

  2. User engagement: Interactive charts can significantly enhance user engagement on a Drupal site. Highcharts allow for interactivity such as tooltips, zooming, and clickable data points, making data more engaging and easier to explore for users.

  3. Real-time data display: For Drupal sites that need to display real-time data (e.g., financial data, live event statistics, IoT data), Highcharts can dynamically update charts without needing to reload the entire page, providing a seamless user experience.

  4. Custom reporting: Organizations using Drupal often need to generate custom reports. Highcharts can be used to create customizable charts and graphs that can be embedded in these reports, offering a visual representation of data that is easy to understand.
    ‍
  1. Responsive design: Highcharts are designed to be responsive, meaning charts will look good on any device, whether it's a desktop, tablet, or smartphone. This is particularly important for Drupal sites that need to provide a consistent experience across different devices.

  2. Data exporting: Highcharts include features that allow users to export charts to various formats (like PNG, JPEG, PDF, SVG), making it easy to include these visualizations in external documents or presentations directly from the Drupal site.

By solving these problems, Highcharts enhances the data visualization capabilities of Drupal, making it a powerful tool for any website that needs to present complex data clearly and engagingly.

Highcharts In Drupal
‍

  1. The Highcharts module is a Drupal API that integrates with the Highcharts JavaScript library.
  2. It includes functions to load appropriate library files and initialize and render multiple Highchart charts. It enhances performance also and reduces the Server load
  • Line charts: To show trends over time.
  • Bar charts: To compare different groups or categories.
  • Pie charts: To show the proportions of a whole.
  • More: There are also scatter plots, area charts, and many other types.

How to configure the highcharts module in the Drupal site?
‍

  1. Adding data: You have data you want to show on your Drupal website, like sales figures, survey results, or event attendance over time.
  2. Creating charts: Highcharts can turn this data into visual charts that make it easier to see patterns, compare values, and understand the information at a glance.
  3. Embedding in content: These charts can be embedded into pages, articles, or reports on your Drupal website.

Pie, Line, Bar, Column, Area, or Scatter charts all charts are available using the charts module

Step-by-step guide

Step 1: Install the required modules
‍

  1. Install the charts module:
  2. Install the required library:
    • The Charts module supports multiple libraries like Highcharts, google_charts, etc.
    • Download highcharts.js from the official highcharts website.
    • Extract the highcharts.js library into the libraries directory in your Drupal root. The path should be libraries/highcharts.

Step 2: Configure and enable the charts module
‍

Step 3: Create a view
‍

  1. Create view
    1. Go to structure > Views > Add view.
    2. Name your view
    3. Choose to show the content of the type you want to chart (e.g., Articles).
    4. Select the "Table" format for now.
    5. Click Save and edit.
  2. Add fields to the view:
    1. In the view configuration, add the fields that you want to include in your chart.
    2. For example, add "Content: Title" and "Content: Created date" fields.
  3. Change the format to chart:
    1. In the view configuration, click on the Format settings.
    2. Change the format from "Table" to "Charts".
    3. Configure the chart settings:
      1. Type: Column
      2. X-axis: The field that represents the categories (e.g., Content: Title).
      3. Y-axis: The field that represents the data values (e.g., count or sum of values).
  4. Save the View

‍

Step 4: Create a block using the view
‍

  1. Create a block display:
    1. In the view configuration, add a new display type by clicking Add > Block.
    2. Configure the block display settings as needed.

  2. Configure the block display format:
    1. Ensure the block display format is set to Charts.
    2. Configure the chart settings
      1. Type: Column
      2. X-axis: The field that represents the categories (e.g., Content: Title).
      3. Y-axis: The field that represents the data values (e.g., count or sum of values).
  3. Save the View

Step 5: Place the block
‍

  1. Place the Block:
    1. Go to Structure > Block Layout.
    2. Find the region where you want to place the block and click Place block.
    3. Search for the view block you created, click Place block, and save the block configuration.

Step 6: Test the block
‍

  1. Navigate to the page
    1. Navigate to the page where your block is displayed.
    2. You should see the column chart rendered with the data from your view.

By following these steps, you can create a column chart in Drupal 9 using a block without writing any custom code. The Charts module, combined with Views, provides an easy way to visualize your data in various chart formats.

Some charts, such as radar, stacked column, group bar, tree, and box plot charts require custom code instead of Views.

Here are some steps on how to create custom charts using external libraries.

Create a custom module
‍

  1. Add required files like .info.yml, libraries.yml, .module, etc…
  2. Need to install some required external libraries via composer in the libraries folder
  3. Add those libraries and dependencies in the libraries.yml file 
    1.  /libraries/highcharts/highcharts.js: {}
    2.  /libraries/highcharts_more/highcharts-more.js: {}
    3.  /libraries/highcharts_exporting/exporting.js: {}
    4. /libraries/highcharts_export-data/export-data.js: {}
    5. /libraries/highcharts_accessibility/accessibility.js: {}
    6. /libraries/highcharts_3d/highcharts-3d.js: {}
  4. Create a custom block: ‘/src/Plugin/Block/’ 
    1. In that custom block, we need to get the data that we want to show in the chart
    2. Attached the library
    3. Pass the variables to drupalSettings
  5. Create a js file in the js folder: ‘/js/’
    1. Get all the variables in js using the drupalSettings syntax
    2. Then need to write JS code for the chart
    3. i.e: Column stacked chart
    4. We can get the js series code from https://www.highcharts.com/demo/highcharts/column-stacked
    5. Also, we can get the other charts example from here: https://www.highcharts.com/demo/highcharts
    6. Check the codepen and understand how to display highcharts using custom code.
  6. Create block twig and add HTML div class for showing highcharts (Check example from below highcharts demo link)

We can get more examples check and test the highcharts from this link: https://www.highcharts.com/demo and implement as per our requirements.

Conclusion

Merging Highcharts with Drupal converts raw data into understandable, interactive visualizations that make users' interactions with information more effective.

A nonprofit can provide trends in donations over a while, making fund-raising more open. A university can display enrollment data, enabling stakeholders to comprehend demographic changes. A news website can provide up-to-date election results, keeping viewers informed in an entertaining manner.

By using the steps in this blog, you can easily integrate Highcharts into your Drupal site so that data can be interacted with instead of merely displayed. With multiple types of charts and options for customization, Highcharts allows you to easily create visuals that meet the particular requirements of your project—be it a basic line graph or an advanced interactive dashboard.

As data is presented in a way that means something, it is no longer simply numbers—it is now a narrative that people can relate to and comprehend instantly.

Written by
Ishani Patel
Drupal Backend Developer
Editor
Ananya Rakhecha
Tech Advocate