Results 1 to 6 of 6

Thread: Chart with different cursor

  1. #1
    Sencha User
    Join Date
    Jul 2008
    Location
    Paris
    Posts
    21
    Answers
    2

    Default Chart with different cursor

    Hello,
    Updating from 5 to 6 I lost a feature that I cannot fix. I want to have a differenrt (cursor:pointer) on charts (bar ,pie ...).
    It seems simple but it is not. Maybe somebody can help me.

    See the Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1s3e


    Code:
    Ext.application({
        name: 'Fiddle',
        launch: function () {
            Ext.on('resize', function () {
                chart1.setWidth(Ext.get('barext1').getWidth());
            });
            var store1 = Ext.create('Ext.data.JsonStore', {
                fields: ['tyear', 'tsoc', 'tsite', 'inscribed'],
                data: [{
                    tyear: 1979,
                    tsite: 4
                }, {
                    tyear: 1980,
                    tsite: 10
                }, {
                    tyear: 1981,
                    tsite: 18
                }, {
                    tyear: 1982,
                    tsite: 11
                }, {
                    tyear: 1983,
                    tsite: 19
                }, {
                    tyear: 1984,
                    tsite: 16
                }, {
                    tyear: 1985,
                    tsite: 2
                }, {
                    tyear: 1986,
                    tsite: 0
                }, {
                    tyear: 1987,
                    tsite: 8
                }, {
                    tyear: 1988,
                    tsite: 9
                }, {
                    tyear: 1989,
                    tsite: 16
                }, {
                    tyear: 1990,
                    tsite: 19
                }, {
                    tyear: 1991,
                    tsite: 19
                }, {
                    tyear: 1992,
                    tsite: 12
    
    
                }, {
                    tyear: 1993,
                    tsite: 8
                }, {
                    tyear: 1994,
                    tsite: 7
                }, {
                    tyear: 1995,
                    tsite: 12
                }, {
                    tyear: 1996,
                    tsite: 19
                }, {
                    tyear: 1997,
                    tsite: 18
                }, {
                    tyear: 1998,
                    tsite: 17
                }, {
                    tyear: 1999,
                    tsite: 13
                }, {
                    tyear: 2000,
                    tsite: 10
    
    
                }, {
                    tyear: 2001,
                    tsite: 14
                }, {
                    tyear: 2002,
                    tsite: 0
                }, {
                    tyear: 2003,
                    tsite: 10
                }, {
                    tyear: 2004,
                    tsite: 13
                }, {
                    tyear: 2005,
                    tsite: 22
                }, {
                    tyear: 2006,
                    tsite: 21
                }, {
                    tyear: 2007,
                    tsite: 7
                }, {
                    tyear: 2008,
                    tsite: 8
                }, {
                    tyear: 2009,
                    tsite: 11
                }, {
                    tyear: 2010,
                    tsite: 18
                }, {
                    tyear: 2011,
                    tsite: 22
                }, {
                    tyear: 2012,
                    tsite: 25
                }, {
                    tyear: 2013,
                    tsite: 17
                }, {
                    tyear: 2014,
                    tsite: 8
                }, {
                    tyear: 2015,
                    tsite: 5
                }, {
                    tyear: 2016,
                    tsite: 12
                }, {
                    tyear: 2017,
                    tsite: 8
                }]
            });
            /**/
            var maxchar = 30;
            var chart1 = Ext.create('Ext.chart.CartesianChart', {
                plugins: {
                    ptype: 'chartitemevents',
                    moveEvents: true
                },
                interactions: [{
                    type: 'panzoom',
                    zoomOnPan: true
                }],
                width: '100%',
                minWidth: 450,
                height: 360,
                renderTo: Ext.get('barext1'),
                animate: true,
                store: store1,
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    majorTickSteps: maxchar == 1 ? 0 : 2,
                    minorTickSteps: 1,
                    adjustMinimumByMajorUnit: true,
                    fields: ['tsite'],
                    minimum: 0,
                    maximum: maxchar,
                    label: {
                        font: '9px Arial, sans-serif',
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    }
                }, {
                    type: 'category',
                    position: 'bottom',
                    label: {
                        font: '8px Arial, sans-serif',
                        renderer: function (v) {
                            return v % 5 === 0 ? v : ''
                        }
                    },
                    fields: ['tyear'],
                    grid: false
                }],
                series: [{
                    type: 'bar',
                    axis: 'left',
                    gutter: 1,
                    yPadding: 2,
                    xPadding: 0,
                    xField: 'tyear',
                    yField: 'tsite',
                    listeners: {
                        itemmouseup: function (series, item, event, eOpts) {
                            //window.location.href = '//' + item.record.data.tyear + '&var=' + item.record.data.tyear;
                        }
                    },
                    label: {
                        //display: 'outside',
                        //renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'horizontal',
                        'text-anchor': 'middle',
                        contrast: true
                    },
                    style: {
                        width: 12,
    
    
                        cursor:'pointer'
                    }
                }]
            });
            /**/
        }
    });
    Last edited by eric00000007; 15 Mar 2017 at 4:19 AM. Reason: title change

  2. #2
    Sencha User
    Join Date
    Jul 2008
    Location
    Paris
    Posts
    21
    Answers
    2

    Default

    The only way so far is to add a style in the HTML
    HTML Code:
    <style>
    .x-surface{
    cursor:pointer;
    }
    </style>

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    This is an existing bug, being tracked as EXTJS-15483.

  4. #4
    Sencha User
    Join Date
    Jul 2008
    Location
    Paris
    Posts
    21
    Answers
    2

    Default

    Thanks. Do you think we can do an override? Do you you have some information that could help me?

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I don't currently have a workaround for this. I suppose you'd have to override the Ext.chart.interactions.ItemHighlight.highlight() method and set the chart element style to the appropriate cursor based on whether or not an item is highlighted.

  6. #6
    Sencha Premium User
    Join Date
    Feb 2012
    Posts
    18

    Default

    You should be able to hook into the existing itemhighlightchange event and modify the DOM to add the pointer cursor.

    Note: You would need to configure highlight: true on the series as well.

    Here is a working example forked from your fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2764
    And also the Sencha cartesian example: https://fiddle.sencha.com/#view/editor&fiddle/2766

Similar Threads

  1. Querying chart => surface doesn't work
    By mankz in forum Ext JS 6.x Bugs
    Replies: 2
    Last Post: 21 Feb 2016, 4:07 AM
  2. Replies: 2
    Last Post: 11 Oct 2013, 4:02 PM
  3. Remove added sprite from chart surface
    By crummy in forum Ext: Q&A
    Replies: 3
    Last Post: 4 Sep 2012, 1:53 PM
  4. Draggable Sprite on Chart Surface
    By mailisa in forum Ext: Discussion
    Replies: 3
    Last Post: 25 Jul 2011, 8:42 AM
  5. Replies: 4
    Last Post: 18 Apr 2011, 6:29 AM

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
  •