Simple ExtWebComponents Chart

AreaChartComponent.html

<ext-cartesian 
  width="500px" 
  height="500px" 
  downloadServerUrl="http://svg.sencha.io" 
  shadow="true"
  insetPadding="25 35 0 10" 
  axes='[{
      "type": "numeric" ,
      "position": "left" ,
      "fields": ["g1", "g2" , "g3" , "g4" , "g5" , "g6" ],
      "label": { "rotate": { "degrees": "-30" } },
      "grid": { "odd": { "fill": "#e8e8e8" } },
      "title": { "text": "Summation of Data" , "fontSize": "20" }
      }, {
      "type": "category",
      "position": "bottom",
      "fields": "name",
      "grid": "true",
      "visibleRange": ["0", "0.25"],
      "title": { "text": "theme", "fontSize": "20" }
    }]' 
    legend='{
      "type": "sprite",
      "position": "bottom"
    }' 
    series='[{
      "type": "area" ,
      "xField": "name",
      "yField": ["g1", "g2" , "g3" , "g4" , "g5" ],
      "title": ["G1", "G2" , "G3" , "G4" , "G5" ],
      "style": { "stroke": "black" , "lineWidth": "2", "fillOpacity": "0.8" }
    }]' 
    platformConfig='{
      "phone": { "insetPadding": "15 5 0 0" }
    }'>
</ext-cartesian>

AreaChartComponent.js

import * as data from './AreaChartComponentData';
import template from './AreaChartComponent.html'

Ext.require([
  'Ext.chart.theme.Midnight',
  'Ext.chart.theme.Green',
  'Ext.chart.theme.Muted',
  'Ext.chart.theme.Purple',
  'Ext.chart.theme.Sky',
  'Ext.chart.series.Area',
  'Ext.chart.axis.Numeric',
  'Ext.chart.axis.Category'
]);

class AreaChartComponent extends HTMLElement {

  constructor() {
    super()

    this.innerHTML = template;
  }

  connectedCallback() {

    // Delay until Ext JS areaChartEl.ext.el is instantiated and ready.
    setTimeout(() => {
      setTimeout(() => {
        this._renderChart();
      }, 0);
    }, 0);
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
  }

  _renderChart() {
    console.log("Render chart")

    let store = Ext.create('Ext.data.Store', {
      fields: ['id', 'g0', 'g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'name'],
    });
    store.loadData(data.createData(25));
    
    let areaChartEl = this.querySelector('ext-cartesian');
    areaChartEl.ext.bindStore(store);
  }

}
window.customElements.define('my-chart-area', AreaChartComponent);

AreaChartComponentData.html

var _seed = 1.3;
function random() {
  _seed *= 7.3;
  _seed -= Math.floor(_seed);
  return _seed;
}

export function createData(numRecords) {
  let data = [],
    record = {
      id: 0,
      g0: 300,
      g1: 700 * random() + 100,
      g2: 700 * random() + 100,
      g3: 700 * random() + 100,
      g4: 700 * random() + 100,
      g5: 700 * random() + 100,
      g6: 700 * random() + 100,
      name: 'Item-0'
    }, i;

  data.push(record);

  for (i = 1; i < numRecords; i++) {
    record = {
      id: i,
      g0: record.g0 + 30 * random(),
      g1: Math.abs(record.g1 + 300 * random() - 140),
      g2: Math.abs(record.g2 + 300 * random() - 140),
      g3: Math.abs(record.g3 + 300 * random() - 140),
      g4: Math.abs(record.g4 + 300 * random() - 140),
      g5: Math.abs(record.g5 + 300 * random() - 140),
      g6: Math.abs(record.g6 + 300 * random() - 140),
      name: 'Item-' + i
    };
    data.push(record);
  }

  console.log("data=", data);

  return data;
}

index.html

<!-- usage -->
<my-chart-area></my-chart-area>

index.js

// EWC
import '@sencha/ext-web-components/lib/ext-audio.component';
import '@sencha/ext-web-components/lib/ext-menu.component';
import '@sencha/ext-web-components/lib/ext-menuitem.component';
import '@sencha/ext-web-components/lib/ext-carousel.component';
import '@sencha/ext-web-components/lib/ext-button.component';
import '@sencha/ext-web-components/lib/ext-checkboxfield.component';
import '@sencha/ext-web-components/lib/ext-column.component';
import '@sencha/ext-web-components/lib/ext-comboboxfield.component';
import '@sencha/ext-web-components/lib/ext-container.component';
import '@sencha/ext-web-components/lib/ext-containerfield.component';
import '@sencha/ext-web-components/lib/ext-splitbutton.component';
import '@sencha/ext-web-components/lib/ext-dataview.component';
import '@sencha/ext-web-components/lib/ext-dialog.component';
import '@sencha/ext-web-components/lib/ext-datepanel.component';
import '@sencha/ext-web-components/lib/ext-datecolumn.component';
import '@sencha/ext-web-components/lib/ext-checkcolumn.component';
import '@sencha/ext-web-components/lib/ext-datepickerfield.component';
import '@sencha/ext-web-components/lib/ext-datepickernativefield.component';
import '@sencha/ext-web-components/lib/ext-emailfield.component';
import '@sencha/ext-web-components/lib/ext-fieldset.component';
import '@sencha/ext-web-components/lib/ext-filefield.component';
import '@sencha/ext-web-components/lib/ext-grid.component';
import '@sencha/ext-web-components/lib/ext-numberfield.component';
import '@sencha/ext-web-components/lib/ext-panel.component';
import '@sencha/ext-web-components/lib/ext-label.component';
import '@sencha/ext-web-components/lib/ext-passwordfield.component';
import '@sencha/ext-web-components/lib/ext-radiofield.component';
import '@sencha/ext-web-components/lib/ext-searchfield.component';
import '@sencha/ext-web-components/lib/ext-selectfield.component';
import '@sencha/ext-web-components/lib/ext-sliderfield.component';
import '@sencha/ext-web-components/lib/ext-spinnerfield.component';
import '@sencha/ext-web-components/lib/ext-tree.component';
import '@sencha/ext-web-components/lib/ext-treelist.component';
import '@sencha/ext-web-components/lib/ext-treelistitem.component';
import '@sencha/ext-web-components/lib/ext-panel.component';
import '@sencha/ext-web-components/lib/ext-segmentedbutton.component';
import '@sencha/ext-web-components/lib/ext-tabpanel.component';
import '@sencha/ext-web-components/lib/ext-tabbar.component';
import '@sencha/ext-web-components/lib/ext-tab.component';
import '@sencha/ext-web-components/lib/ext-textareafield.component';
import '@sencha/ext-web-components/lib/ext-textfield.component';
import '@sencha/ext-web-components/lib/ext-timefield.component';
import '@sencha/ext-web-components/lib/ext-textareafield.component';
import '@sencha/ext-web-components/lib/ext-textfield.component';
import '@sencha/ext-web-components/lib/ext-timefield.component';
import '@sencha/ext-web-components/lib/ext-timepanel.component';
import '@sencha/ext-web-components/lib/ext-titlebar.component';
import '@sencha/ext-web-components/lib/ext-togglefield.component';
import '@sencha/ext-web-components/lib/ext-toolbar.component';
import '@sencha/ext-web-components/lib/ext-urlfield.component';
import '@sencha/ext-web-components/lib/ext-grid.component';
import '@sencha/ext-web-components/lib/ext-column.component';
import '@sencha/ext-web-components/lib/ext-formpanel.component';
import '@sencha/ext-web-components/lib/ext-textfield.component';
import '@sencha/ext-web-components/lib/ext-gauge.component';
import '@sencha/ext-web-components/lib/ext-colorselector.component';
import '@sencha/ext-web-components/lib/ext-draw.component';
import '@sencha/ext-web-components/lib/ext-progress.component';
import '@sencha/ext-web-components/lib/ext-spacer.component';
import '@sencha/ext-web-components/lib/ext-sheet.component';
import '@sencha/ext-web-components/lib/ext-video.component';
import '@sencha/ext-web-components/lib/ext-list.component';
import '@sencha/ext-web-components/lib/ext-widget.component';
import '@sencha/ext-web-components/lib/ext-nestedlist.component';
import '@sencha/ext-web-components/lib/ext-pivotgrid.component';
import '@sencha/ext-web-components/lib/ext-calendar.component';
import '@sencha/ext-web-components/lib/ext-calendar-list.component';
import '@sencha/ext-web-components/lib/ext-calendar-day.component';
import '@sencha/ext-web-components/lib/ext-calendar-days.component';
import '@sencha/ext-web-components/lib/ext-calendar-month.component';
import '@sencha/ext-web-components/lib/ext-calendar-week.component';
import '@sencha/ext-web-components/lib/ext-cartesian.component';
import '@sencha/ext-web-components/lib/ext-indicator.component';
import '@sencha/ext-web-components/lib/ext-lockedgrid.component';
import '@sencha/ext-web-components/lib/ext-tooltip.component';
import '@sencha/ext-web-components/lib/ext-polar.component';
import '@sencha/ext-web-components/lib/ext-chart.component';
import '@sencha/ext-web-components/lib/ext-widgetcell.component';
import '@sencha/ext-web-components/lib/ext-datecolumn.component';
import '@sencha/ext-web-components/lib/ext-textcolumn.component';
import '@sencha/ext-web-components/lib/ext-checkcolumn.component';
import '@sencha/ext-web-components/lib/ext-menucheckitem.component';
import '@sencha/ext-web-components/lib/ext-numbercolumn.component';
import '@sencha/ext-web-components/lib/ext-d3.component';
import '@sencha/ext-web-components/lib/ext-d3-horizontal-tree.component';
import '@sencha/ext-web-components/lib/ext-d3-pack.component';
import '@sencha/ext-web-components/lib/ext-d3-sunburst.component';
import '@sencha/ext-web-components/lib/ext-d3-tree.component';
import '@sencha/ext-web-components/lib/ext-d3-treemap.component';
import '@sencha/ext-web-components/lib/ext-pivotd3container.component';
import '@sencha/ext-web-components/lib/ext-chartnavigator.component';
import '@sencha/ext-web-components/lib/ext-d3-heatmap.component';
import '@sencha/ext-web-components/lib/ext-pivotheatmap.component';
import '@sencha/ext-web-components/lib/ext-checkboxgroup.component';
import '@sencha/ext-web-components/lib/ext-component.component';
import '@sencha/ext-web-components/lib/ext-breadcrumbbar.component';
import '@sencha/ext-web-components/lib/ext-froalaeditorfield.component';
import '@sencha/ext-web-components/lib/ext-accordion.component';

// APP
import './view/charts/AreaChartComponent';

webpack.config.js

//...

new ExtWebpackPlugin({
  framework: 'web-components',
  toolkit: 'modern',
  theme: 'theme-material',
  emit: emit,
  script: './extract-code.js',
  port: 8080,
  packages: [
      'renderercell',
      'font-ext',
      'ux',
      'd3',
      'pivot-d3',
      'font-awesome',
      'exporter',
      'pivot',
      'calendar',
      'charts',
      'treegrid',
      'froala-editor'
  ],
  profile: profile,
  environment: environment,
  treeshake: treeshake,
  browser: browser,
  watch: watch,
  verbose: verbose,
  inject: 'yes',
  intellishake: 'no'
})

//...

The same config can be found here:
https://github.com/sencha/ext-web-components/tree/ext-web-components-7.1.x/packages/ext-web-components-kitchensink