text: /* ------------------------------------------------------------------------------
   *
   *  # Echarts - Compositive waterfall example
   *
   *  Demo JS code for compositive waterfall chart [dark theme]
   *
   * ---------------------------------------------------------------------------- */
  
  
  // Setup module
  // ------------------------------
  
  var EchartsWaterfallCompositiveDark = function() {
  
  
      //
      // Setup module components
      //
  
      // Compositive waterfall chart
      var _waterfallCompositiveDarkExample = function() {
          if (typeof echarts == 'undefined') {
              console.warn('Warning - echarts.min.js is not loaded.');
              return;
          }
  
          // Define element
          var columns_compositive_waterfall_element = document.getElementById('columns_compositive_waterfall');
  
  
          //
          // Charts configuration
          //
  
          if (columns_compositive_waterfall_element) {
  
              // Initialize chart
              var columns_compositive_waterfall = echarts.init(columns_compositive_waterfall_element);
  
  
              //
              // Chart config
              //
  
              // Options
              columns_compositive_waterfall.setOption({
  
                  // Global text styles
                  textStyle: {
                      fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                      fontSize: 13
                  },
  
                  // Chart animation duration
                  animationDuration: 750,
  
                  // Setup grid
                  grid: {
                      left: 10,
                      right: 10,
                      top: 35,
                      bottom: 0,
                      containLabel: true
                  },
  
                  // Tooltip
                  tooltip: {
                      trigger: 'axis',
                      backgroundColor: 'rgba(255,255,255,0.9)',
                      padding: [10, 15],
                      textStyle: {
                          color: '#222',
                          fontSize: 13,
                          fontFamily: 'Roboto, sans-serif'
                      },
                      axisPointer: {
                          type: 'shadow',
                          shadowStyle: {
                              color: 'rgba(255,255,255,0.1)'
                          }
                      },
                      formatter: function (params) {
                          var tar = params[0];
                          return tar.name + '<br/>' + tar.seriesName + ': ' + tar.value;
                      }
                  },
  
                  // Horizontal axis
                  xAxis: [{
                      type: 'category',
                      data: ['Total cost', 'Rent', 'Utilities', 'Transport', 'Meals', 'Commodity', 'Taxes', 'Travel'],
                      axisLabel: {
                          color: '#fff'
                      },
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(255,255,255,0.25)'
                          }
                      },
                      splitLine: {
                          show: true,
                          lineStyle: {
                              color: 'rgba(255,255,255,0.1)',
                              type: 'dashed'
                          }
                      }
                  }],
  
                  // Vertical axis
                  yAxis: [{
                      type: 'value',
                      axisLabel: {
                          color: '#fff'
                      },
                      axisLine: {
                          lineStyle: {
                              color: 'rgba(255,255,255,0.25)'
                          }
                      },
                      splitLine: {
                          lineStyle: {
                              color: 'rgba(255,255,255,0.1)'
                          }
                      },
                      splitArea: {
                          show: true,
                          areaStyle: {
                              color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
                          }
                      }
                  }],
  
                  // Add series
                  series: [
                      {
                          name: 'Aid',
                          type: 'bar',
                          stack: 'Total',
                          itemStyle: {
                              normal: {
                                  barBorderColor: 'rgba(0,0,0,0)',
                                  color: 'rgba(0,0,0,0)'
                              },
                              emphasis: {
                                  barBorderColor: 'rgba(0,0,0,0)',
                                  color: 'rgba(0,0,0,0)'
                              }
                          },
                          data:[0, 3500, 3000, 2300, 1700, 900, 400, 0]
                      },
                      {
                          name: 'Cost of living',
                          type: 'bar',
                          stack: 'Total',
                          itemStyle: {
                              normal: {
                                  barBorderRadius: 3,
                                  color: '#b6a2de',
                                  label: {
                                      show: true,
                                      position: 'inside'
                                  }
                              },
                              emphasis: {
                                  color: '#b6a2de',
                              }
                          },
                          data: [4500, 1000, 500, 700, 600, 800, 500, 400]
                      }
                  ]
              });
          }
  
  
          //
          // Resize charts
          //
  
          // Resize function
          var triggerChartResize = function() {
              columns_compositive_waterfall_element && columns_compositive_waterfall.resize();
          };
  
          // On sidebar width change
          var sidebarToggle = document.querySelector('.sidebar-control');
          sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
  
          // On window resize
          var resizeCharts;
          window.addEventListener('resize', function() {
              clearTimeout(resizeCharts);
              resizeCharts = setTimeout(function () {
                  triggerChartResize();
              }, 200);
          });
      };
  
  
      //
      // Return objects assigned to module
      //
  
      return {
          init: function() {
              _waterfallCompositiveDarkExample();
          }
      }
  }();
  
  
  // Initialize module
  // ------------------------------
  
  document.addEventListener('DOMContentLoaded', function() {
      EchartsWaterfallCompositiveDark.init();
  });
  