Question in regards to ExtJs integration with GXT via JSNI

[KathyL]

Have a further question pertaining to the negative area chart.
The backstory - I was able to successfully get the sample project at https://gist.github.com/branflake226...8e82d003f62eb3 to work. So, I've been looking at the JSNI approach as a start for GXT integration. I had then begun read up a little bit more about the Area chart within the ExtJs documentation. The screenshot below shows a simple chart that I had produced by making a very slight change to the code of the sample project mentioned above:




For example, I find that I can change
the fill color (positive, negative areas) from the green to a grey color with a red stroke by adding to the javascript code within private native void drawChartJsni():
style: {
fill: '#666666',
stroke: "#ff0000",
fillOpacity: 0.8
}


However my question is, Can one change the positive area fill to be one color, with the negative fill being another color? I've been looking a bit in https://docs.sencha.com/extjs/6.2.0/..._charting.html, and haven't seen anything to accomplish this thus far.

[branflake2267]

Turns out there is no option to change what color shows up in the negative region. There is an option to change the opacity so when the areas are stacked the colors change color. Would changing the opacity be enough to work for you?

Here what I used to experiment with changing the color conditionally, but it changes the series color.

/**
 * Use $wnd to access js objects outside the gwt sandbox
 */
private native void drawChartJsni(Element renderToEl) /*-{
  $wnd.Ext.create('Ext.chart.CartesianChart', {
    renderTo : renderToEl,
    width : 600,
    height : 200,


    store : {
      fields : [ 'name', 'g1', 'g2' ],
      data : [ {
        "name" : "Item-0",
        "g1" : -57,
        "g2" : -59
      }, {
        "name" : "Item-1",
        "g1" : 45,
        "g2" : -50
      }, {
        "name" : "Item-2",
        "g1" : 67,
        "g2" : 43
      }, {
        "name" : "Item-3",
        "g1" : -45,
        "g2" : -18
      }, {
        "name" : "Item-4",
        "g1" : 30,
        "g2" : 90
      } ]
    },


    legend : {
      docked : 'right'
    },


    axes : [ {
      type : 'numeric',
      position : 'left',
      grid : true
    }, {
      type : 'category',
      position : 'bottom'
    } ],


    series : [ {
      type : 'area',
      xField : 'name',
      yField : [ 'g1', 'g2' ],
      title : [ 'G1', 'G2' ],
      renderer: function (sprite, config, rendererData, index) {
       var item = rendererData.store.getData().items[index];
       if (sprite._field === 'g1') {
         var value = item.data.g1;
         if (value < 0) {
           sprite.setAttributes({
              fillStyle: 'red',
          });
         }
       } else if (sprite._field === 'g2') {
         var value = item.data.g2;
         if (value < 0) {
           
         }
       }
      }
    } ]
  });
}-*/;

Screen Shot 2018-01-08 at 3.34.37 PM.png

[KathyL]

Thanks for your feedback, but unfortunately the changing of the opacity wouldn't work for our purposes. However, I'll explore a bit more with the ExtJs because we're looking to find alternatives to our other stock charts (e.g. candlestick) which we currently have with a 3rd party provider. Although we use GXT, I do note that ExtJs does have example of the candlestick chart when I looked into the "kitchen sink".(GXT doesn't have the candlestick).

[branflake2267]

We do have something that might work. In this example we have a custom series with what looks like a candlestick chart.

https://edash-dot-sencha-gxt-demos.a...quarterly:AAPL - demo
https://github.com/sencha/gxt-demo-edash - source

Would that help you get closer to your goal?