_area_inverted.html.haml

:javascript
  var chart;
  $(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              defaultSeriesType: 'area',
              inverted: true
          },
          title: {
              text: 'Average fruit consumption during one week'
          },
          subtitle: {
              style: {
                  position: 'absolute',
                  right: '0px',
                  bottom: '10px'
              }
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -150,
              y: 100,
              floating: true,
              borderWidth: 1,
              backgroundColor: '#FFFFFF'
          },
          xAxis: {
              categories: [
                  'Monday',
                  'Tuesday',
                  'Wednesday',
                  'Thursday',
                  'Friday',
                  'Saturday',
                  'Sunday'
              ]
          },
          yAxis: {
              title: {
                  text: 'Number of units'
              },
              labels: {
                  formatter: function() {
                      return this.value;
                  }
              },
              min: 0
          },
          tooltip: {
              formatter: function() {
                      return ''+
                      this.x +': '+ this.y;
              }
          },
          plotOptions: {
              area: {
                  fillOpacity: 0.5
              }
          },
          series: [{
              name: 'John',
              data: [3, 4, 3, 5, 4, 10, 12]
          }, {
              name: 'Jane',
              data: [1, 3, 4, 3, 3, 5, 4]
          }]
      });
  });

-@title = "#{t('txt.graphics.highcharts.name')} - #{t('txt.graphics.highcharts.area.name')} - #{t('txt.graphics.highcharts.area.inverted')}"

%h4
  =image_tag("icons/22x22/highcharts.png", :border => 0)
  =@title

#container{:style => "width: 800px; height: 400px; margin: 0 auto"}