Results 1 to 2 of 2

Thread: Sencha Charts - Axis Grid - strokeOpacity

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    21

    Exclamation Sencha Charts - Axis Grid - strokeOpacity

    Hi,
    We are trying to use the grid property in the axis config with a specific stroke and opacity.

    You can see a running example here: https://fiddle.sencha.com/#fiddle/qk6

    Code:
    var chart = new Ext.chart.Chart({    store: {
          fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
          data: [
              {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
              {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
              {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
              {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
              {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
          ]
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'data1',
            grid:{
                strokeStyle: 'red',
                strokeOpacity: 0.5,
                lineWidth: 1
            }
        }, {
            type: 'category',
            position: 'bottom',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'name'
        }],
        series: [{
            type: 'bar',
            xField: 'name',
            yField: 'data1',
            style: {
              fill: 'blue'
            }
        }]
    });
    Ext.Viewport.setLayout('fit');
    Ext.Viewport.add(chart);
    You can notice that the top grid's line has no opacity, but this is because Sencha Charts paints a line over the top line in this function: http://docs.sencha.com/touch/2.4/2.4...enderGridLines

    Specifically, after iterated the ticks:
    Code:
    ...
    lastAnchor = attr.min * yy + dy + endGap + startGap;
    me.iterate(majorTicks, function (position, labelText, i) {
        anchor = position * yy + dy + endGap;
        me.putMarker('horizontal-' + (i % 2 ? 'odd' : 'even'), {
            y: anchor,
            height: lastAnchor - anchor
        }, j = i, true);
        lastAnchor = anchor;
    });
    j++;
    anchor = 0;
    me.putMarker('horizontal-' + (j % 2 ? 'odd' : 'even'), {
        y: anchor,
        height: lastAnchor - anchor
    }, j, true);
    ...
    first of all: Why the framework paints this last line forcibly?
    second question: What can we do to resolve this problem?


    We appreciate any help.

    Thanks!

  2. #2
    Sencha User
    Join Date
    Jan 2009
    Location
    Nashville
    Posts
    64
    Answers
    2

    Default

    Unless I misread your post, this should solve your issue.

    I found using rgba( R , G , B , A ) and lowing the Alpha is easiest.

    Code:
            
            axes: [{
                type: 'numeric',
                position: 'left',
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                fields: 'data1',
    
                grid: {
                    stroke: 'rgba(255,0,0,0.5)',
                },
                style: {
                    stroke: 'rgba(255,0,0,0.5)',
                }
            }, {
                type: 'category',
                position: 'bottom',
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                fields: 'name',
    
                grid: {
                    stroke: 'rgba(255,0,0,0.5)'
                },
                style: {
                    stroke: 'rgba(255,0,0,0.5)'
                }
            }],

Similar Threads

  1. [OPEN] Chart axis strokeOpacity is always 1
    By The0s in forum Ext 5: Bugs
    Replies: 1
    Last Post: 16 Dec 2014, 12:14 PM
  2. Sencha Charts - Axis questions
    By LesJ in forum Ext 5: Q&A
    Replies: 2
    Last Post: 30 Oct 2014, 7:14 AM
  3. sencha-charts Axis undefined errors
    By mharris45 in forum Ext 5: Bugs
    Replies: 3
    Last Post: 23 Oct 2014, 5:30 AM
  4. Sencha Charts X-Axis Label Hidden Under Legend
    By Schindler86 in forum Ext 5: Q&A
    Replies: 2
    Last Post: 6 Oct 2014, 6:46 AM
  5. Sencha touch charts x axis is not showing
    By Grolubao in forum Sencha Touch 2.x: Q&A
    Replies: 1
    Last Post: 16 Sep 2012, 3:13 PM

Tags for this Thread

Posting Permissions

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