Search code examples
extjsextjs6

Prevent Extjs Marker Circles from cutting off

I'm new to Extjs and I'm learning as I go along. I have a long way to go but I learn what I need to know. My marker circles cut off. Is there a setting/workaround I could use to prevent this? See image:

enter image description here

I've looked at the v6.0.0 docs and not sure what to use. Code:


Ext.onReady(() => {
  Ext.create({
    xtype: 'cartesian',
    renderTo: element, // rendered element
    height: 200,
    insetPadding: 20,
    store: {
        fields: ['name', 'amount'],
        data: [..] // data
    },
    smooth: true,
    axes: [{
      type: 'category',
      position: 'bottom',
      fields: ['name'],
      label: {
        fill: 'rgba(0,10,30,.75)',
        fontSize: 15
      },
      style : {
        strokeStyle : 'rgba(0,10,30,.2)'
      }
    }],
    series: [
    {
      type: 'line',
      fill: true,
      style: {
        fill: '#a2d5f2',
        fillOpacity: .6,
        stroke: '#00a1fd',
        strokeOpacity: .6,
      },
      tooltip: {
        trackMouse: true,   
        renderer: (tooltip, model, item) => {
            const content = item.record.data.name + ': ' + item.record.data.amount
            //tooltip.setHtml(model.get(item.field));
            tooltip.setHtml(content)
        }
      },
      xField: 'name',
      yField: 'amount',
      marker: {
        type: 'circle',
        radius: 5,
        lineWidth: 2,
        fill: '#fff',
        fillOpacity: 1,
      },
      renderer: (sprite, config, rendererData, index) => {
        let store = rendererData.store,
              storeItems = store.getData().items,
              previousRecord = storeItems[index],
              currentRecord = (index > 0 ? storeItems[index - 1] : previousRecord),
              current = currentRecord && parseFloat(currentRecord.data['amount']),
              previous = previousRecord && parseFloat(previousRecord.data['amount']),
              changes = {};
              
        switch (config.type) {
          case 'marker':
              if (index == 0) {
                  return null; // keep the default style for the first marker
              }
              changes.strokeStyle = (current >= previous ? '#00a1fd' : 'red');
              //changes.fillStyle = '#fff';
              //changes.fillOpacity = 1;
              //changes.lineWidth = 2;
              break;
          case 'line':
              changes.strokeStyle = (current >= previous ? '#00a1fd' : 'red');
              changes.lineWidth = 2;
              changes.fillStyle = (current >= previous ? '#a2d5f2' : 'red');
              changes.fillOpacity = (current >= previous ? 1 : .1);
              break;
        }
        return changes;
      }
    }]
  });
})

I believe Xero is using Ext and their circles do not cut off:

enter image description here

Solution

  • You can use innerPadding config property:

    Ext.onReady(() => {
  Ext.create({
    xtype: 'cartesian',
    renderTo: element, // rendered element
    height: 200,
    innerPadding: 10, // THIS PROPERTY
...
...