[CLOSED] Change font style of chart Legend

  1. #1

    [CLOSED] Change font style of chart Legend

    I created a custom chart theme in Javascript but not sure how to set the font style for legend items.

    Ext.define('Ext.chart.theme.Strata', {    extend: 'Ext.chart.theme.Base',
    
    
        constructor: function (config) {
    
    
    
    
            var fontColor = '#434343';
    
    
            this.callParent([Ext.apply({
                legend: {
                    'boxStrokeWidth': 0,
                    'stroke-width': 0,
                    font: 'bold 11px Century Gothic'
                },
                axis: {
                    fill: fontColor,
                    stroke: fontColor,
                    font: '12px Century Gothic'
                },
                title: {
                    fill: fontColor,
                    font: 'bold 12px Century Gothic'
    
    
                },
                axisTitleLeft: {
                    fill: fontColor,
                    font: 'bold 12px Century Gothic'
                },
                axisTitleRight: {
                    fill: fontColor,
                    font: 'bold 12px Century Gothic'
                },
                axisTitleBottom: {
                    fill: fontColor,
                    font: 'bold 12px Century Gothic'
                },
                axisLabelLeft: {
                    fill: '#444',
                    font: '11px Century Gothic'
                },
                axisLabelBottom: {
                    fill: '#444',
                    font: '11px Century Gothic'
                },
                axisTitleTop: {
                    fill: fontColor,
                    font: 'bold 11px Century Gothic'
                },
                series: {
                    'stroke-width': 3
                },
                marker: {
                    'stroke-width': 0,
                    fill: '#000',
                    radius: 4,
                    size: 4
                },
                colors: ['#FFB24F', '#8CCBFF', '#7ECC78', '#FFF284', '#FF7581', '#CFB8E8', '#EBC0FF', '#F9E4AD', '#723147', '#7E827A'],
                seriesThemes: [{
                    fill: '#FFB24F'
                }, {
                    fill: '#8CCBFF'
                }, {
                    fill: '#7ECC78'
                }, {
                    fill: '#FFF284'
                }, {
                    fill: '#FF7581'
                }, {
                    fill: '#CFB8E8'
                }, {
                    fill: '#EBC0FF'
                }, {
                    fill: '#F9E4AD'
                }, {
                    fill: '#723147'
                }],
                markerThemes: [{
                    fill: '#FFB24F',
                    type: 'circle'
                }, {
                    fill: '#8CCBFF',
                    type: 'circle'
                }, {
                    fill: '#7ECC78',
                    type: 'circle'
                }, {
                    fill: '#FFF284',
                    type: 'circle'
                }, {
                    fill: '#FF7581',
                    type: 'circle'
                }, {
                    fill: '#CFB8E8',
                    type: 'circle'
                }, {
                    fill: '#EBC0FF',
                    type: 'circle'
                }, {
                    fill: '#F9E4AD',
                    type: 'circle'
                }, {
                    fill: '#723147',
                    type: 'circle'
                }]
    
    
            }, config)]);
        }
    });
    Last edited by Daniil; May 06, 2014 at 7:01 AM. Reason: [CLOSED]
  2. #2
    Hi @jchau,

    It looks like a Chart theme doesn't deal with a Legend.

    To set up a font you can use this setting:
    http://docs-origin.sencha.com/extjs/...-cfg-labelFont
  3. #3
    ok thanks. To confirm, there's no global way to set legend font?
  4. #4
    I'd say it should work:
    Ext.chart.Legend.property.labelFont = "...";
    Does it?

Similar Threads

  1. [CLOSED] How to change font style and font size of ext:TextArea?
    By aditya in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 27, 2014, 9:39 AM
  2. [CLOSED] Change legend of Bar Chart
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 16, 2013, 11:32 AM
  3. [CLOSED] Globally change style of chart
    By jchau in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 18, 2013, 4:33 AM
  4. How to change a line style on the chart?
    By Natalie in forum 2.x Help
    Replies: 3
    Last Post: May 16, 2012, 11:15 AM
  5. [CLOSED] Change the Font style to Bold for a Row in Grid View
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 10, 2011, 11:50 AM

Posting Permissions