text: /**
   * A basic bar chart is a chart with horizontal bars of lengths proportional to the
   * magnitudes of the data it represents. Basic bars can be used in the same manner as the
   * column charts. Categories are typically organized along the vertical axis and values
   * along the horizontal axis. Tapping or hovering a bar will highlight it.
   */
  Ext.define('KitchenSink.view.chart.bar.Basic', {
      extend: 'Ext.Container',
      xtype: 'bar-basic',
      controller: 'bar-basic',
  
      //<example>
      otherContent: [{
          type: 'Controller',
          path: 'modern/src/view/chart/bar/BasicController.js'
      }, {
          type: 'Store',
          path: 'app/store/EconomySectors.js'
      }],
  
      profiles: {
          defaults: {
              buttonShadow: true,
              insetPadding: '20 10',
              padding: 8,
              shadow: true,
              tbarPadding: '5 8',
              themeText: 'Theme'
          },
          ios: {
              buttonShadow: undefined,
              tbarPadding: undefined
          },
          phone: {
              defaults: {
                  insetPadding: '20 10',
                  padding: undefined,
                  shadow: undefined,
                  tbarPadding: '12 8'
              },
              ios: {
                  tbarPadding: undefined
              }
          }
      },
  
      padding: '${padding}', // give room for the chart's shadow
      shadow: false,
      //</example>
  
      layout: 'fit',
  
      items: [{
          bind: {
              theme: '{menuGroups.charttheme}'
          },
          xtype: 'cartesian',
          shadow: '${shadow}',
          reference: 'chart',
          flipXY: true,
          insetPadding: '${insetPadding}',
          store: {
              type: 'economy-sectors'
          },
          axes: [{
              type: 'numeric',
              position: 'bottom',
              fields: 'ind',
              grid: true,
              maximum: 4000000,
              title: 'Billions of USD',
              renderer: 'onAxisLabelRender'
          }, {
              type: 'category',
              position: 'left',
              fields: 'country',
              grid: true
          }],
          series: [{
              type: 'bar',
              xField: 'country',
              yField: 'ind'
          }]
      }, {
          xtype: 'toolbar',
          docked: 'top',
          ui: 'transparent',
          padding: '${tbarPadding}',
          layout: {
              type: 'hbox',
              align: 'stretch'
          },
          defaults: {
              shadow: '${buttonShadow}',
              ui: 'action'
          },
          items: [{
              text: '${themeText}',
              iconCls: 'x-fa fa-picture-o',
              arrow: false,
              menu: {
                  bind: {
                      groups: '{menuGroups}'
                  },
                  defaults: {
                      xtype: 'menuradioitem',
                      group: 'charttheme'
                  },
                  items: [{
                      text: 'Default',
                      checked: true
                  }, {
                      text: 'Midnight'
                  }, {
                      text: 'Green'
                  }, {
                      text: 'Muted'
                  }, {
                      text: 'Purple'
                  }, {
                      text: 'Sky'
                  }]
              }
          }]
      }]
  });
  