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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Published at DZone with permission of Jorge Ramon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}