Results 1 to 5 of 5

Thread: Change Pie-Chart Color

Threaded View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Oct 2012
    Vote Rating

    Default Answered: Change Pie-Chart Color

    I'm not able to change the colors for my pie chart (pic attached). I already tried a few things but nothing worked so far. Would be great if someone could point me in the right direction....

    Here is the code for my chart:
        var chart1 =  new Ext.create('Ext.chart.Chart', {        title:'Parkplatz ',
            store: Ext.getStore('ParkplatzStoreCharts'), //the store that it will use
            animate: true,
            shadow: true,
            styleHtmlContent: true,
            legend: {
                position: 'top'
            series: [{
                type: 'pie',
                showInLegend: true,
                field: 'value',
                label: { //the label inside each pie
                    field: 'description',
                    font: '0.7em Arial',
                    display: 'rotate',
                    contrast: true
    here is my default-theme.scss:
    $base-color: #698593;$active-color: #cfd500;
    $chart-blue: #ff0000;
    @import 'sencha-touch/default/all';
    // You may remove any of the following modules that you
    // do not use in order to create a smaller css file.
    @include sencha-panel;
    @include sencha-buttons;
    @include sencha-sheet;
    @include sencha-picker;
    @include sencha-tabs;
    @include sencha-toolbar;
    @include sencha-toolbar-forms;
    @include sencha-indexbar;
    @include sencha-list;
    @include sencha-layout;
    @include sencha-carousel;
    @include sencha-form;
    @include sencha-msgbox;
    // Charts stuff here
    @import 'compass/css3';
    @import 'touch-charts/default/all';
    @include touch-charts-draw;
    @include touch-charts-chart;
    @include touch-charts-toolbar;
    @include touch-charts-panzoom;
    @include touch-charts-legend;
    .detail {
      border: 1px solid #dddddd;
      background: #fff;
      padding: 1em;
      -webkit-border-radius: 0.6em;
      border-radius: 0.6em;
      text-shadow: #fff 0 1px 1px;
      color: #333333;
      margin-right: 2em;
      font-weight: bold;
      white-space: nowrap;
      font-size: 1.2em;
      margin-bottom: 2em;
    and here my config.rb:
    dir = File.dirname(__FILE__)
    #load the sencha-touch framework
    load File.join(dir, '..','touch', 'resources', 'themes');
    load File.join(dir, '..','charts','resources', 'themes')
    sass_path = dir
    css_path = File.join(dir, "..")
    output_style = :expanded
    environment = :development
    Attached Images Attached Images

  2. Charts for ST2 are now built into the library in 2.1.0. Touch Charts 2 beta is no longer supported.

Posting Permissions

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