My ExtJs chart Experiment. Using GWT 2.8.0-beta1(&SNAPSHOT) JsInterop, Wrapping a ExtJs chart. (The JSNI is for comparison of the JsInterop.)

BarSeriesChartExample3.java

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gwt.jsinterop.examples.client.ext.Ext;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;

import jsinterop.annotations.JsFunction;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;

// http://docs.sencha.com/extjs/6.0/6.0.1-classic/
public class BarSeriesChartExample3 implements EntryPoint {

  @Override
  public void onModuleLoad() {
    TextButton button = new TextButton("draw chart");
    button.addSelectHandler(new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        drawChart1();
        // drawChart2();
      }
    });
    RootPanel.get().add(button);
  }

  @JsType
  public static class NameValueModelConfig {
    @JsProperty()
    public String name = "";
    @JsProperty()
    public Double value = 0.0;
  }

  @JsFunction
  public static interface Constructor {
    Object onConstructor(Object config);
  }

  @JsType()
  public static class NameValueModel {
    @JsProperty()
    public String name;
    @JsProperty()
    public Double value;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Axes {
    @JsProperty
    String type;
    @JsProperty
    String position;
    @JsProperty
    Object title;
    @JsProperty
    String fields;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Series {
    @JsProperty
    String type;
    @JsProperty
    Object subStyle;
    @JsProperty
    String xField;
    @JsProperty
    String yField;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class ChartConfig {
    @JsProperty
    String xtype;
    @JsProperty
    String renderTo;
    @JsProperty
    int width;
    @JsProperty
    int height;
    @JsProperty
    Object store;
    @JsProperty
    Object[] axes;
    @JsProperty
    Object[] series;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Title {
    @JsProperty
    String text;
    @JsProperty
    int fontSize;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class SubStyle {
    @JsProperty
    String[] fill;
    @JsProperty
    String stroke;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class Field {
    @JsProperty
    String name;
    @JsProperty
    String type;
  }

  @JsType
  public static interface Store {
    void add(Object data);
  }

  @JsType
  public static class NameValueModelDefine {
    @JsProperty
    public Object extend;
    @JsProperty
    public Object[] fields;
    @JsProperty
    public Object constructor;

    public native Object initConfig(java.lang.Object config);
  }

  private native void createModel0() /*-{
		$wnd.Ext.define('com.example.NameValueModel', {
			config : {
				name : 'Z',
				value : 0,
			},
			constructor : function(config) {
				this.initConfig(config);
				return this;
			},
			schema : "com.example"
		});
  }-*/;

  @JsType
  public static class DefineConfig {
    @JsProperty
    Object extend;
    @JsProperty
    Object fields;
  }

  @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
  public static class StoreConfig {
    @JsProperty
    Object model;
    @JsProperty
    Object fields;
    @JsProperty
    Object[] data;
    @JsProperty
    Object autoLoad;
    @JsProperty
    Object proxy;
  }

  @JsType
  public static class Proxy {
    @JsProperty
    Object type;
    @JsProperty
    Object url;
    @JsProperty
    Object reader;
  }

  @JsType
  public static class Reader {
    @JsProperty
    Object type;
    @JsProperty
    Object rootProperty;
  }

  private void drawChart1() {
    Field field0 = new Field();
    field0.name = "name";
    field0.type = "string";
    Field field1 = new Field();
    field1.name = "value";
    field1.type = "float";
    Field[] fields = new Field[2];
    fields[0] = field0;
    fields[1] = field1;

    DefineConfig defineConfig = new DefineConfig();
    defineConfig.extend = "Ext.data.Model";
    defineConfig.fields = fields;
    Ext.define("com.example.NameValueModel", defineConfig);

    NameValueModel nvm0 = new NameValueModel();
    nvm0.name = "A";
    nvm0.value = 1.0;
    NameValueModel nvm1 = new NameValueModel();
    nvm1.name = "B";
    nvm1.value = 2.0;
    NameValueModel nvm2 = new NameValueModel();
    nvm2.name = "C";
    nvm2.value = 3.0;
    NameValueModel nvm3 = new NameValueModel();
    nvm3.name = "D";
    nvm3.value = 4.0;
    NameValueModel nvm4 = new NameValueModel();
    nvm4.name = "E";
    nvm4.value = 5.0;

    NameValueModel[] datas = new NameValueModel[4];
    datas[0] = nvm0;
    datas[1] = nvm1;
    datas[2] = nvm2;
    datas[3] = nvm3;
    datas[4] = nvm4;

    StoreConfig storeConfig = new StoreConfig();
    storeConfig.model = "com.example.NameValueModel";
    storeConfig.data = datas;

    Object store = Ext.create("Ext.data.Store", storeConfig);

    Title title1 = new Title();
    title1.text = "Sample Values 1";
    title1.fontSize = 15;

    Title title2 = new Title();
    title2.text = "Sample Values 2";
    title2.fontSize = 15;

    Axes axes1 = new Axes();
    axes1.type = "numeric";
    axes1.position = "left";
    axes1.title = title1;
    axes1.fields = "value";

    Axes axes2 = new Axes();
    axes2.type = "category";
    axes2.position = "bottom";
    axes2.title = title2;
    axes2.fields = "name";

    Axes[] axes = new Axes[2];
    axes[0] = axes1;
    axes[1] = axes2;

    String[] fills = new String[1];
    fills[0] = "#388FAD";

    SubStyle subStyle = new SubStyle();
    subStyle.fill = fills;
    subStyle.stroke = "#1F6D91";

    Series series1 = new Series();
    series1.type = "bar";
    series1.subStyle = subStyle;
    series1.xField = "name";
    series1.yField = "value";

    Series[] series = new Series[1];
    series[0] = series1;

    ChartConfig chartConfig = new ChartConfig();
    chartConfig.xtype = "cartesian";
    chartConfig.renderTo = "chartDivId";
    chartConfig.width = 600;
    chartConfig.height = 400;
    chartConfig.store = store;
    chartConfig.axes = axes;
    chartConfig.series = series;

    Ext.create(chartConfig);
  }

  private native void drawChart2() /*-{
		$wnd.Ext.create({
			xtype : 'cartesian',
			renderTo : "chartDivId",
			width : 600,
			height : 400,
			store : {
				fields : [ 'name', 'value' ],
				data : [ {
					name : 'metric one',
					value : 10
				}, {
					name : 'metric two',
					value : 7
				}, {
					name : 'metric three',
					value : 5
				}, {
					name : 'metric four',
					value : 2
				}, {
					name : 'metric five',
					value : 27
				} ]
			},

			axes : [ {
				type : 'numeric',
				position : 'left',
				title : {
					text : 'Sample Values',
					fontSize : 15
				},
				fields : 'value'
			}, {
				type : 'category',
				position : 'bottom',
				title : {
					text : 'Sample Values',
					fontSize : 15
				},
				fields : 'name'
			} ],

			series : {
				type : 'bar',
				subStyle : {
					fill : [ '#388FAD' ],
					stroke : '#1F6D91'
				},
				xField : 'name',
				yField : 'value'
			}
		});

  }-*/;

}

Ext.java

import jsinterop.annotations.JsMethod;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;

@JsType(isNative = true, name = "Ext", namespace = JsPackage.GLOBAL)
public abstract class Ext {

  @JsProperty(name = "isChrome")
  public static native boolean isChrome();

  @JsMethod()
  public static native void define(String className, java.lang.Object data);
    
  @JsMethod()
  public static native java.lang.Object create(java.lang.Object config);
  
  @JsMethod()
  public static native java.lang.Object create(String className, java.lang.Object config);
  
}

index.html

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="MyGxtProjectExtJs.css">
  <title>Project Ext Js</title>
  
        <script type="text/javascript" src="JsInteropExamples/JsInteropExamples.nocache.js"></script>
  
        <!-- extjs -->
        <link rel="stylesheet" type="text/css" href="theme-triton/resources/theme-triton-all.css">
        <link rel="stylesheet" type="text/css" href="triton/resources/charts-all-debug.css">
        <script type="text/javascript" src="ext-all-debug.js"></script>
        <script type="text/javascript" src="charts-debug.js"></script>
        <script type="text/javascript" src="theme-triton/theme-triton.js"></script>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>

<div id="chartDivId" style="width:800px; height:800px; border: 1px solid red;"></div>

</body>
</html>