Anyone know how to create multiple stacked area charts vs multiple basic area charts in Drupal using the Views integration of the Charts module (and using Highcharts as the charting engine)?

I would like to create a (stacked area) chart as shown at http://www.highcharts.com/demo/area-stacked, as opposed to the (basic area) chart as shown at http://www.highcharts.com/demo/area-basic.

Also, I would like pop up information to work with multiple stacked charts as it does with single area charts. It works on the sites included above but does not work with charts created with Drupal Views.


2 Answers 2


Stacking the charts

The most recent Charts version does not yet support "stacked" charts (of type Area, or Column, etc.).

However, have a look at the support issue (not bug!) about Stacking column/bar charts. Even though that issue is not about "Area", the approach should also work for Area charts. The clue is in comment nr 1 or nr 3 of that issue, i.e. this specific line: $chart['#stacking'] = true;. So if you succeed in passing that, you solved your question. This is what you can see in the example included there:

function MYMODULE_chart_alter(&$chart, $chart_id) {
  dsm($chart_id); // Need Developer module enabled for dsm to work
  if ($chart_id == 'MYCHARTVIEW__DISPLAY') { // Watch out for those double underscores
    $chart['#stacking'] = TRUE;

Obviously, the above requires a custom module, since it's not possible "yet" to so via the Views UI.

You may also want to have a look at these somehow related feature requests, which possibly provide an alternative to what you're trying to get to work:

Once we'll have these feature requests committed, we'll have a solution for using options that are specific for either of the supported charting engines (Google Charts or Highcharts). While still not deviating from a key design concept of the Charts module, which is that all supported charting options should work for either charting engines (you should be able to easily swap from one to the other charting engine, without your charts being affected).

Popup information

Refer to "Combination chart without aggregation" for an online demo of a chart (with multiple stacked charts) that shows such popup information (perform a mouse-over for any of the data points to see them at work).

This demo sample using Google Charts as its charting engine (not the Highcharts as in your question). Since nowhere within the Charts module there is some option to specify like "add popup information", my best guess would be that, by default (without specifying any charting engine options about it), the default for Google Charts is that such charts are created with such popups, while for Highcharts they are created without them. As a quick debugging hint: temporary change to the Google Charts engine and revisit your same chart, to check if that makes them show up in that case. So that you know it's really a Highcharts related setting that's missing (and which differs from the default).

If it doesn't seem to work for the Highcharts library, then you'll have to find out what the specific charting engine option for this is to make it work (there are tons of options in each charting engine, nobody knows them all, at least not me). After you know the specific option(s), you could try to use an approach of passing these options as raw_options, similar to stacking the charts.

Disclosure: I'm a co-maintainer of the Charts module.


The latest -dev version of Charts (D8) now supports this for Highcharts and Google when you use the Grouping field.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.