How to increase thickness of line in Line Chart?

[Vishwastalule]

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....

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

[suzuki1100nz]

Put your code in code blocks please.

Highlight the code and click the # button in the editor
OR

In source mode add [CODE] at start of your code and [/CODE] at the end

Thanks

[Vishwastalule]

Hi,

How should I increase thickness of line in line chart?
Here is my 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:

.linecss{
border:5px solid blue;
}

[suzuki1100nz]

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

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