Column Chart - how to customize legend text

[aviadisr]

Hi,

I need to customize the legend text in a column chart and could not find the way to do it.
Tried to add renderer, legendRenderer to the legend but nothing works.

Any help would be appreciated.

10x,
Aviad

[mitchellsimoens]

Currently no way to easily do this.

[Cangot]

Hi,

I needed to customize axis title and for that I had to create my own chart theme. I guess you wil have to do the same for legend.

You will have to create your own file_MyTheme.scss and use the cmd "build-touch-charts.sh/.bat", as described here : http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling

Take a look at that file if you decide to create your theme :
touch-charts\resources\themes\stylesheets\touch-charts\default\_legend.scss

[fairport]

Are you referring to the way Sencha uses the data model field names as labels?
In our case, we're using SQLite as the data source so it was a simple matter of using field aliases in our SELECT SQL statements to get user friendly display names.
We also needed to make those names react to the on-the-fly language change system .. which we found we could

[aviadisr]

Hi,

Yes, I exactly mean that. I did workaround it by changing the field names.
How did you make those names react to the 'on-the-fly language change system'? Do you mean you did it by changing the aliases on the SQL?

[fairport]

We have built an on-the-fly language changing system, using a JSON array of translations... called by a function called "_ ". We load the array before the models & proxies are loaded.

This all works well...

E.g. Model

Ext.regModel('weatherGraphModel', {
    fields: [
        {name : 'TheDate'     , type : 'datetime'},
        {name : _('Rainfall')     , type : 'float'},
        {name : _('Evaporation')     , type : 'float'},
        {name : _('MinTemp')     , type : 'float'},
        {name : _('MaxTemp')     , type : 'float'},
        {name : _('MinHumidity')     , type : 'float'},
        {name : _('MaxHumidity')     , type : 'float'},
        {name : _('MaxTempHumidity')     , type : 'float'}  
    ],
    proxy: {
        type: "graphProxy"
    }
}); 

Proxy - SQL

            sql = 'SELECT TheDate, '+
            'Rainfall AS '+_('Rainfall')+
            ', Evaporation AS '+_('Evaporation')+
            ', MinTemp AS '+_('MinTemp')+
            ', MaxTemp AS '+_('MaxTemp')+
            ', MinHumidity AS '+_('MinHumidity')+
            ', MaxHumidity AS '+_('MaxHumidity')+
            ', MaxTempHumidity AS '+_('MaxTempHumidity'); 

Example of Code in Chart JS

    axes: [{
        type: 'Numeric',
        minimum: 0,
        position: 'left',
        fields: [_('Rainfall'), _('Evaporation'), _('MinTemp'), _('MaxTemp')], 

[aviadisr]

Thanks!

[danyvalenzuela]

I found this example for ExtJs4, but works for touch charts.


series: [{
yField: ['data1', 'data2'],
title: ['Title 1', 'Title 2']
}]