Over a million developers have joined DZone.

Ext JS Charts: Creating line charts without markers

DZone 's Guide to

Ext JS Charts: Creating line charts without markers

· Web Dev Zone ·
Free Resource

We have previously worked on changing data series style and creating custom markers for our Ext JS charts.  In this article we will look at a simple configuration that can be used with the Ext JS 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 Ext JS 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,
        fillColor: 0xCCCCCC,                    
}, {
    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?

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



Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}