That's not possible as of yet. Let's track this as an enhancement.

I would also be interested by that.
I'm trying to implement it, but I don't well see how area is drawn using SVG... (and I think it's not that easy :) )

We had a similar discussion already here #283 and I've produced an example with masking http://jsbin.com/yahuzun/4/edit?css,js,output which was only to test the mechanism.

After closer consideration I believe that the easiest way to enable users to build band area charts would be to add an option to Chartist that allows you to associate two series together to form a band.

I have something like this in mind:

var chart = new Chartist.Line('.ct-chart', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  series: [
    {
      name: 'max',
      data: [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6]
    },
    {
      name: 'min',
      data: [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5]
    }
  ]
}, {
  bands: [
    {lower: 'min', upper: 'max'}
  ]
});

This would still draw the regular series min and max (if not prevented with showLine and showPoint set to false) but would also create a band on the line chart canvas that is constructed from the series referenced by name in the bands objects. Its also possible to add options into the bands objects and of course create multiple bands.

Thoughts?

Btw. I renamed the issue to something more generic.

Since you're taking a closer look at it, let me show you a really nice implementation of this feature (scroll down).

^{I know that chartist is not intended to provide that kind of time-serie data on the x-axis but I don't really want it}

Also, most common usage of this feature would be something like this, which I think you already have it in mind since you've said that it'd be possible to create multiple bands.

bands: [
  {lower: 'mean', upper: 'max'},
  {lower: 'min', upper: 'mean'}
]

I thought that it could be to use the areaBase option for an area to define the lower bound of the area.

new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  series: [
    {
      name: 'mini',
      data: [0, 0, 0, 0, 0, 1, 3, 4, 5, 6]
    },
    {
      name: 'maxi',
      data: [5, 2, 3, 4, 6, 8.5, 11, 13, 15, 16]
    }
  ]
}, {
  low: -2,
  // showLine: false,
  showPoint: false,
  series: {
    'maxi': {
      showArea: true,
      areaBase: 'mini'
    },
  }
});

This way, it's easy to keep Chartist draw lines or points for each serie.

@maftieu that's also an interesting approach! But then it will be hard to attach band options like custom class name etc. I also thought of something like this:

var chart = new Chartist.Line('.ct-chart', {
  labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  series: [
    {name: 'max', data: [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6]},
    {name: 'avg', data: [6, 7, 5, 7.5, 4, 3, 5.5, 2, 3, 3, 4, 6]},
    {name: 'min',  data: [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5]}
  ]
}, {
  plugins: [Chartist.plugins.ctBands({
      bands: [
        {lower: 'avg', upper: 'max', className: 'avg-to-max'},
        {lower: 'min', upper: 'avg', className: 'avg-to-min'}
      ],
      removeSeries: ['avg']
  })]
})

Where removeSeries would remove those series (including points, lines and regular areas) after the bands were created. I want to make sure someone can still show some lines and / or points if desired but can also remove series that were only used to draw the bands.

I think this functionality fits nicely into a plugin. What do you think? It's just a matter of including an other script and referencing the plugin on the chart.

It certainly looks promising! I still wonder if there's a possibility this way to make a chart like this: http://jsbin.com/suquco/1/edit?html,js,console,output without too much hassle.

@Martinomagnifico for this use-case we can easily make the areaBase configurable per series with the series config object and then just have regular step line charts with two different bases (one at 0 and the other at 100). I can add this change for the series based areaBase value into 0.9.0.

I think this functionality fits nicely into a plugin.

Yeah! It'd be even better!

Wow, that would be very cool!!!