title: Prevent Extjs Marker Circles from cutting off
body: <p>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:</p>
  <p><a href="https://i.stack.imgur.com/8WkuO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WkuO.png" alt="enter image description here" /></a></p>
  <p>I've looked at the v6.0.0 docs and not sure what to use. Code:</p>
  <pre class="lang-js prettyprint-override"><code>
  Ext.onReady(() =&gt; {
    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) =&gt; {
              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) =&gt; {
          let store = rendererData.store,
                storeItems = store.getData().items,
                previousRecord = storeItems[index],
                currentRecord = (index &gt; 0 ? storeItems[index - 1] : previousRecord),
                current = currentRecord &amp;&amp; parseFloat(currentRecord.data['amount']),
                previous = previousRecord &amp;&amp; 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 &gt;= previous ? '#00a1fd' : 'red');
                //changes.fillStyle = '#fff';
                //changes.fillOpacity = 1;
                //changes.lineWidth = 2;
                break;
            case 'line':
                changes.strokeStyle = (current &gt;= previous ? '#00a1fd' : 'red');
                changes.lineWidth = 2;
                changes.fillStyle = (current &gt;= previous ? '#a2d5f2' : 'red');
                changes.fillOpacity = (current &gt;= previous ? 1 : .1);
                break;
          }
          return changes;
        }
      }]
    });
  })
  
  </code></pre>
  <p>I believe Xero is using Ext and their circles do not cut off:</p>
  <p><a href="https://i.stack.imgur.com/iAnMo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iAnMo.png" alt="enter image description here" /></a></p>