Results 1 to 2 of 2

Thread: Struggling With Bar Chart

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Vote Rating

    Default Struggling With Bar Chart

    I'm a few days into my Architect 2 trial and I've hit a problem that the samples have not solved.

    I've a small block of code for theming a chart from your extjs tutorials (exhibit A). Now I'm not sure where this should live in the Architect world so I've added it to Application launch, on render event for my chart, etc. If I set the theme of my chart to Ext.chart.theme.Fancy or Fancy in the architect UI, the preview of the chart is not the desired effect (nothing really renders), and it goes on to tell me the object has no rendered. I've tried to peel back the onion on /src/chart/theme/Base.js but have not succeeded in getting any style other than the canned styles to effect my chart.

    Question 1. Where is it appropriate to put the block of code to create a theme for a chart in the Architect 2 fashion? I've tried Application launch, on render event for the chart, etc.
    Question 2. How do I apply the theme?
    Question 3. What is wrong with the theme I listed below? From with a minor change to the color list for learning.

    Exhibit A
        var colors = ['#CCCCCC',
        var baseColor = '#eee';
        Ext.define('Ext.chart.theme.Fancy', {
            extend: 'Ext.chart.theme.Base',
            constructor: function(config) {
                    axis: {
                        fill: baseColor,
                        stroke: baseColor
                    axisLabelLeft: {
                        fill: baseColor
                    axisLabelBottom: {
                        fill: baseColor
                    axisTitleLeft: {
                        fill: baseColor
                    axisTitleBottom: {
                        fill: baseColor
                    colors: colors
                }, config)]);

  2. #2
    Sencha User jjohnston's Avatar
    Join Date
    Sep 2010
    Vote Rating


    Question 1: At this time I'd recommend putting the code in a JS Resource - see

    Ideally Architect would let you extend the base theme and choose colors etc. that way, but we're not there yet unfortunately.

    Question 2: In the config for the chart, you'll see a 'theme' config. Set it to the name of your theme, in your case 'Fancy'.

    Question 3: Nothing appears to be wrong with it -- when I add your code into a JS Resource and set the chart's 'theme' config to reference it, I see your light gray colors applied as expected when previewing it in the browser:

    Perhaps what is confusing you is that custom code cannot currently be run within Architect's canvas. Since your theme is implemented via custom code, it will therefore not be applied within the canvas -- you'll have to save and preview your project to see it applied. We are working to fix this limitation in a future release.

    I hope that helps.
    Jason Johnston
    Sencha Architect Development Team

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts