Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

ExtJS Charts: Creating Line Charts Without Markers

March 16, 2010 Leave a Comment

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.

Tagged With: ExtJS Tutorial Leave a Comment

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2019 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in