ExtJS Charts: Creating Line Charts Without Markers

We have previously worked on changing data series style and creating custom markers for our ExtJS charts.  In this article we will look at a simple configuration that can be used with the ExtJS line charts in order to hide the chart markers.

This configuration is useful, for example, in scenarios like the one shown below, where the Average series of a web page performance chart does not need to have markers:

Hiding ExtJS chart markers using transparency

The approach consists of using the alpha and fillAlpha properties of a series’ style to make the markers invisible, as shown in the following code:

series: [{
    type: 'line',
    displayName: 'Average',
    yField: 'average',
    style: {
        color: 0xCCCCCC,
        alpha:0,
        fillColor: 0xCCCCCC,
        fillAlpha:0
    }
}, {
    type: 'line',
    displayName: 'Load Time',
    yField: 'loadtime',
    style: {
        color: 0xcc6600
    }
}]

According to the YUI 2 Charts documentation, the alpha property is a numeric value, 0.0 to 1.0, that represents the alpha of the markers in the series.  The fillAlpha property represents the fill alpha of the markers in the series.

Setting both alpha and fillAlpha to 0 makes the markers transparent and the series appears as a solid line with no markers.

Want to learn more?

Check out my Ext JS 3.0 Cookbook.  It contains more than a hundred step-by-step recipes that explain useful techniques to build great ExtJS applications.