Sencha Touch Charts: A New Way to Interact with Data on the Mobile Web

Various chart styles

We’re excited to share with you the beta release of “Sencha Touch Charts”:/products/touch/charts. Touch Charts is a new add-on to Sencha Touch that we think will change how people interact with mobile web data. Just like AJAX was a revolution because it accelerated work flow by eliminating page refreshes, Touch Charts allows users to explore and interact with data in-session without high latency server image serving. With the included gesture controls in Touch Charts, users can zoom in and out of data, pan across data sets, as well as quickly aggregate and filter data series.

h3. HTML5: Canvas

When we released the new drawing packing in “Ext JS 4″:/products/extjs/, we took browser drawing and packaging to a whole new level. With Touch Charts we took the core drawing and charting system from Ext JS 4 and made it come alive.When we started to think mobile for Charts, we had a few key requirements. First, it had to work on all platforms that Sencha Touch supported, including Android 2+, iOS, and BlackBerry OS6. Second, it had to be mobile friendly and feel fast. We wanted to come as close to a native experience as possible using HTML5.

In order to get to that high performance native feel, we implemented a HTML5 Canvas engine in the core drawing system. Out of the gate that gave us some great benefits. We were able to leverage Canvas’ drop shadow capabilities that are hardware accelerated on many browsers. Different legend configurations Also by changing the underlying drawing system from the SVG/VML in Ext JS 4, we were able to get all the basics of the higher level charting system in place incredibly quickly and then focus on delivering the mobile specific experience.

While designing Touch Charts, we took into account that mobile has two devices types: phones and tablets; and two orientations: portrait and landscape. Touch Charts adapts to device size and orientation by creating different layouts for the charts legend. Where there’s limited screen real estate, the legend is activated via a slide-out menu so users can focus on the data. When there’s enough screen real estate (on a tablet, for example) legends are shown inline. In both cases, Legend Views extend from DataView, so they’re fully configurable Sencha Touch components.

h3. Animated and Interactive

Selected pie chart The best part of building in a modern browser for mobile is being able to build Charts that are mobile specific, so we have the ability to add gesture control. The gestural interactions are completely configurable, so on any chart you can change the kinds of interactions you want to use. For example, you can enable a “pie chart”: to spin with a drag or a pinch. On a “bar graph”: you can let your users pinch to zoom, drag to pan, swap between a grouped and stacked bar with a swipe, and more. You can also add interactions directly on an axis and expose more gestures on the chart itself.

Anybody who has experience in HTML5 knows that mobile WebKit browsers differ, sometimes significantly. One key issue that we came across when building Touch Charts was the lack of consistent multi-touch browser events in different browsers. Android most notably doesn’t handle this well until Android 3.x. This posed a problem when using pinch-to-zoom on an axis, so Touch Charts provides a compatibility mode that enables the user to toggle between zoom and pan modes with older HTML5 browsers but use gestures on more capable browsers.

h3. Style via SASS

Much like Sencha Touch, all charts in Touch Charts are stylable using SASS. Changes to the look and feel of a chart, like those to gradients, drop shadows, fonts and colors, can be implemented with variables and mixing inside SCSS files. The included “Energy App example”: is a great example of an application that takes advantage of SASS and is styled with a darker theme. Just changing a few variables can style any chart in Touch Charts.

h3{clear: both}. Demos

If you want to get a feel for how Touch Charts looks try out these three demos in a “WebKit browser”:

US Energy app icon
World Data app icon
Combo chart icon

p{clear: both}. “(more-icon) View other examples”:

If you’re visiting from a non-WebKit browser (such as Firefox or Internet Explorer), you can also “see this video”: and get a feel for how Touch Charts look on a mobile device.

h3{clear: both}. Get Started

To take advantage of all this graphical greatness, check out the “new product page”:/products/touch/charts/ and “download the beta”:/products/charts/download/. The download contains the full source for examples and documentation to get you started building Sencha Touch Charts.

p(button-group). “(button-link green small arrow inline)Download Now“:/products/touch/charts/download/

Written by

Aditya is Sencha's vice president of product marketing and is responsible for the product planning and strategy for Sencha's product lines. Prior to Sencha, Aditya held various senior product management roles at Adobe and Microsoft, focusing on developers and media in the mobile and consumer electronics space.


  1. says

    This is really amazing!
    I think this was one of the features most requested by ST developers, we waited and we do not have disappointed. As usual, not only this important feature has been developed, but was developed in the best way possible. Customers will be pleased to learn this news:). Thanks Sencha Team.

  2. says


    Wow… Great using HTML5-Canvas. and some graphic support by hardware accelerated.

    Thank you Sencha.

    P.S. my Korean text is broken..

  3. PlayBook Tester says

    A welcome addition to the family, but some of the performance issues of ST need to be addressed asap. The slide effect in the World data example run at 1-2fps when cards include charts.

  4. says

    Looks great! I guess canvas is always faster on a phone? Even iPhone 4? On Retina display, the text looks kinda blocky. The graphics do to a little, but not nearly as noticeable. Either way, it still rocks to have such charts on a mobile web page! Awesome going guys!

  5. Les says

    I saw the video and it’s very cool :)

    Will I be able to create draggable sprites using this addon?

    I know sprite dragging doesn’t quite work in the current Ext.draw (IE is a problem).


  6. PlayBook Tester says

    @Eugene – I wouldn’t hold my breath as we’ll see a patched 1.x release first, so it will probably be months before ST hits 2.0. My 8-ball told me September ;)

  7. says

    @Steven Roussey We haven’t done the retina tricks yet to force it to be high resolution. I’m a bit worried on how it will perform, but we’ll see how it goes.

  8. says

    @Jamie I’m afraid rentina will be slow… but wonder if the graphics could be in canvas and the text in SVG. I’m sure someone that knows the code (like you) is cringing right now… ;)

  9. says

    Awesome work Sencha Team. I was so eagerly waiting for the TouchCharts. Hope to see more transitions and varieties. Is the API documentation available for it?

  10. says

    Glad to hear that….it looks promising!
    I hope it’s gonna get better in terms of performance on the oficial release…

    on iOS is just great, on android devices is somehow slow…

  11. Alex Moore says

    I found the charts to be very unresponsive on a newly installed IPad 1 (4.3.3) with no other applications running apart from safari. Has anyone else experienced this?

    The responsiveness is slow when adjusting the data range of the axis and scrolling left and right. Also with the demo, changing between line and area took a long time.

  12. bigfish says

    I know touch is targeting touch devices ,but can Sencha Touch response the mouse scroll event as Mac OS Lion does?

  13. says

    Works fine when the chart is used in an panel that isnt visibel on startup. (smooth etc)
    But when the chart is in a panel that is visible on startup (init drawing?)
    My console returns me: “Out of Memory”, …

    Thats to bad … :/

  14. says

    @Rafael Roman We continue doing what we can, Android has a couple of issues we’re dealing with, opacity seems to really kill it’s performance so some examples that use it are really suffering. Another is the crazy amount of events it fires, which we have to deal with in Sencha Touch itself better.

  15. says


    Indeed that’s true I’m also developing webapplications for android, and in terms of events it’s a mess.

    iOS is better in that particular case, but that memory issue related to javascript in a webview is also not good.

    Anyway, I’m happy to hear that you guys are focused on creating the best you can, hope to hear news from sencha charts soon!

    Thank you

  16. says

    @Jamie Avins, I have check the code multiple times, but don’t really find a “snap” in it. Should be almost identical to what the Api docs give as example code ( In the project where I’m testing charts in ).

    If an example would be usefull,.. I can extract the chart-page to new project and put it online ?

  17. Norman says

    I have a need to create a chart with 2 parameters and time in the X-axis. This can be done with extJS as I can see an example there but I can’t find an example of it with the Sencha Touch Charts. Can it be done too or can I integrate extJS 4 with Sencha Touch? To better explain the type of chart I need imagine a chart with vertical bars and also a linear chart, both combined within the same chart. One will display sales and the other will display units sold and time will be in the x-axis.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>