Highcharts for TYPO3

Highcharts brings interactive data visualisation into the TYPO3 backend when editors should maintain charts without working in Excel or external tools

Numbers, KPIs and trends belong on corporate websites, as financial figures in the investor relations area, as market data in content marketing, as evaluation results at associations and public authorities. The classic solution is static graphics created somewhere in Excel, exported as PNG and uploaded manually. That is tedious and error-prone: when a number changes, the entire graphic has to be redone. Highcharts solves the problem by generating charts directly from structured data, interactively in the browser, with tooltips, hover effects and zoom functions. The TYPO3 integration makes the editorial process fully backend-driven: editors maintain data series in an input mask, and the extension generates the chart.

The real productivity lever emerges when data series are not maintained manually but pulled from external sources. A CSV from controlling, an export from a data warehouse or an API call to an internal dashboard delivers the figures, and TYPO3 renders the public chart from them. This separation between data source and presentation turns the maintenance of KPIs into a commit, not a screenshot exchange.

Typical use cases

The classic case are investor relations and financial data pages. A listed company shows revenue development, employee numbers and market shares as interactive charts. On quarterly releases, the IR team simply updates the data series, the chart refreshes automatically, and visitors can read the exact values per year on mouse-over.

The second case are evaluation and study results at associations, foundations and public authorities. A member survey, an environmental study or an economic survey is presented as bar, line or pie chart. Highcharts makes it possible to present complex datasets with many categories clearly and offers export functions that let visitors take the charts away as image or PDF.

Third use: content marketing and data journalism. Corporate blogs and specialist magazines use interactive graphics to explain complex relationships, price developments, market shares, usage statistics. Interactivity increases time on page and makes the content quotable for other media.

Technical architecture

Highcharts as a JavaScript library is an established product from the Norwegian company Highsoft, distributed under a commercial licence but available free of charge for non-commercial purposes. The TYPO3 integration adds backend forms for maintaining data series and renders the matching JavaScript code in the frontend that initialises Highcharts.

Typically, the extension consists of a content element in which editors configure chart type (line, bar, pie, area), axis labelling, colours and data series. Every data series can be maintained manually as a table or pulled from external sources such as CSV files, database queries or REST APIs. In the frontend, the extension emits a div container with configuration JSON, and a script block initialises Highcharts and renders the chart client-side.

The licensing question is central. For commercial TYPO3 projects, a Highcharts licence has to be purchased, ranging from a few hundred to several thousand euros per year depending on scope. Anyone who wants to avoid that finds good alternatives in Chart.js, ApexCharts or Plotly, which are MIT or Apache licensed. The decision rests on features: Highcharts offers the broadest range of chart types and the best documentation, while the alternatives reliably cover standard cases.

Common problems and solutions

The first problem is unclear licensing. Projects start with the assumption that Highcharts is free, and the commercial bill arrives later. The solution lies in an early licence check: if the project is commercial, either a Highcharts licence is budgeted or a free alternative is picked from the start. Gosign clarifies this question at kickoff.

Second problem: performance with many data series. A chart with thousands of data points blocks the browser on rendering. The solution is either data reduction through server-side aggregation or the use of Highcharts modules such as Boost, which render large volumes on WebGL. For standard cases, compressing the raw data to a sensible granularity before it reaches the browser is enough.

Third problem: accessibility. Interactive charts are often inaccessible for screen readers. Highcharts offers an accessibility module that makes the data available as a structured table alongside the visual chart. The pragmatic addition is to show a regular HTML table with the same data below every chart, visually hidden via CSS but still available for screen readers.

Migration and version compatibility

TYPO3 integrations for Highcharts exist in several variants of varying quality and currency. For TYPO3 v11 there are actively maintained extensions; for v12 and v13 the choice is smaller, and adjustments to ext_emconf and service configurations are often needed. Anyone starting fresh today should soberly check whether an existing extension still fits or whether a sitepackage integration with a free library such as Chart.js is the more future-proof path.

In an upgrade scenario, the Highcharts version is the critical factor. New Highcharts releases occasionally break the API, especially for complex chart types. A migration should therefore always be tested on a staging system before touching live dashboards.

A pragmatic approach for existing projects: inventory current charts, list the features actually used and check whether a free alternative covers the same ground. In many cases, the requirements are modest (line and bar charts with a few data series), and a free library covers them without loss of quality. The saved licence budget can instead be spent on better content management of the data series.

Gosign integrates Highcharts into TYPO3, guides licence clarification and migration projects, and implements lightweight alternatives such as Chart.js or ApexCharts as a sitepackage component when needed. The right choice depends on which chart types are actually needed and what budget is available for licences.