1. #1
    Sencha User
    Join Date
    Sep 2012
    Location
    India
    Posts
    19
    Vote Rating
    0
    Vishwastalule is on a distinguished road

      0  

    Default Unanswered: How to increase thickness of line in Line Chart?

    Unanswered: How to increase thickness of line in Line Chart?


    Hi,

    I am using ST charts beta to draw column chart and line chart.
    I want to increase thickness of line in line chart from view/controller.
    How should I increase it?
    How to change the color of line?

    Also in column chart , columns are cut off. How should I adjust its height with y axis.

    Here is a code....


    Code:
    Ext.define("app.view.Daily_Column_Chart",{
            
            extend:"Ext.chart.Chart",
            xtype:"daily_column_chart",
            config:{
                width:"100%",
                height:"93%",
                title:"chart",
                iconCls:'bookmarks',
                id:"daily_chart",
                margin:"30px 0px 0px 0px",
                shadow: false,
                animate: true,
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    id:"set_axis",
                    fields: ['earning','plan'],
                    title: 'Output',
                    grid: true,
                    label:{
                      fill:"#fff"
                    },
                    labelTitle: {
                        font: '16px Helvetica,sans-serif',
                        fill:"#fff"
                    },
                    minimum: 0,
                   adjustMinimumByMajorUnit: 0
                }, 
            {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['date'],
                    title:'Month of year',
                    label:{
                        fill:"#fff"
                    },
                    labelTitle: {
                        font: '16px Helvetica,sans-serif',
                        fill:"#fff"
                    }
    
    
    
    
                }],
                //create the actual area series
                series:[{
                    type:"column",
                    animate:true,
                    highlight: true,
                    showInLegend: true,
                    axis:"left",
    
    
                    xField:"date",
                    yField:['earning'],
                    
                 },
                     {
                        type: 'line',
                        highlight: true,
                        showInLegend: true,
                        showMarkers:false,
                        smooth: true,
                        axis: 'left',
                        xField: 'date',
                        yField: 'plan'
                    }
                    ]
    
    
            }
        });
    Thanks,
    Vishwas

  2. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    464
    Vote Rating
    69
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Put your code in code blocks please.

    Highlight the code and click the # button in the editor
    OR
    HTML Code:
    In source mode add [CODE] at start of your code and [/CODE] at the end
    Thanks

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Location
    India
    Posts
    19
    Vote Rating
    0
    Vishwastalule is on a distinguished road

      0  

    Default


    Hi,

    How should I increase thickness of line in line chart?
    Here is my code..

    Code:
    Ext.define("app.view.Daily_Column_Chart",{
            
            extend:"Ext.chart.Chart",
            xtype:"daily_column_chart",
            config:{
                width:"100%",
                height:"93%",
                title:"chart",
                iconCls:'bookmarks',
                
                margin:"30px 0px 0px 0px",
                shadow: false,
                animate: true,
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    id:"set_axis",
                    fields: ['earning','plan'],
                    title: 'Output',
                    grid: true,
                    label:{
                      fill:"#fff"
                    },
                    labelTitle: {
                        font: '16px Helvetica,sans-serif',
                        fill:"#fff"
                    },
                    minimum: 0,
                   adjustMinimumByMajorUnit: 0
                }, 
            {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['date'],
                    title:'Month of year',
                    label:{
                        fill:"#fff"
                    },
                    labelTitle: {
                        font: '16px Helvetica,sans-serif',
                        fill:"#fff"
                    }
                }],
                series:[
                     {
                        type: 'line',
                        highlight: true,
                        showInLegend: true,
                        showMarkers:false,
                        smooth: true,
                        axis: 'left',
                        xField: 'date',
                cls:'linecss',
                        yField: 'plan'
                    }
                    ]
    
    
    
    
            }
        });


    here is css:

    Code:
    .linecss{
    border:5px solid blue;
    }

  4. #4
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    464
    Vote Rating
    69
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Hi,

    Have a look at http://docs.sencha.com/touch/2-1/#!/...rt.series.Line

    Look specifically at the style config - This is an object used to render the line sprite so line sprite config is what you set.
    See line sprite - http://docs.sencha.com/touch/2-1/#!/api/Ext.chart.series.sprite.Line


    You will see a config called lineWidth.

    Net result

    Code:
     series:[
     {   
        type: 'line',
        highlight: true,
        showInLegend: true,
        showMarkers:false,
        smooth: true,
        axis: 'left',
        xField: 'date',
        cls:'linecss',
        yField: 'plan',
        style : {
          lineWidth : 4 //pixel width
        }
      }
    ]

Thread Participants: 1