Results 1 to 2 of 2

Thread: Overlapping the bar chart labels if value is less than -5

  1. #1
    Sencha User
    Join Date
    Sep 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default Overlapping the bar chart labels if value is less than -5

    // left side :totalMktValueLoss and right side :totalMktValueGain, this issue is happening when totalMktValueLoss is less than the -5 as range is set more in Bar chart(x-axis).
    Ext.define('Portal.view.acctHousehold.holdings.LargestGainLossChart', {
    extend: 'Ext.container.Container',
    xtype: 'largestgainlosschart',
    width: '100%',
    height: 250,


    maxLengthOfAxis: 0,
    barCount: 0,


    initComponent: function() {
    var me = this;
    var viewModel = me.lookupViewModel();
    me.items = [{
    xtype: 'cartesian',
    engine: 'Ext.draw.engine.Svg',
    reference: 'largestGainLossChartRef',
    width: '100%',
    height: 250,
    background: '#eeeff0', //background of whole chart
    flipXY: true,
    //legend: true,
    //store: '',
    axes: [{
    type: 'numeric',
    position: 'bottom',
    fields: ['totalMktValueLoss', 'totalMktValueGain'],
    minimum: (-1 * me.maxLengthOfAxis),
    maximum: me.maxLengthOfAxis,
    //minimum: (-1 * 14000),
    //maximum: 14000,
    renderer: function(axis, yAxisLabelVal) {
    //return yAxisLabelVal.toFixed(0);
    return me.nFormatter(yAxisLabelVal);
    },
    grid: {
    stroke: '#F2F0F0'
    },
    label: {
    color: Portal.constants.ChartAxesFormatting.getColor1(),
    fontFamily: Portal.constants.ChartAxesFormatting.getFontFamily2(),
    fontSize: Portal.constants.ChartAxesFormatting.getFontSize2()
    }
    }, {
    type: 'category',
    hidden: true,
    position: 'left',
    fields: 'xAxisVal',
    grid: {
    stroke: '#F2F0F0'
    },
    renderer: function(axis, xAxisLabelValue) {
    return xAxisLabelValue;
    },
    label: {
    color: Portal.constants.ChartAxesFormatting.getColor1(),
    fontFamily: Portal.constants.ChartAxesFormatting.getFontFamily1(),
    fontSize: Portal.constants.ChartAxesFormatting.getFontSize3(),
    textTransform: Portal.constants.ChartAxesFormatting.getTextTransform1()
    }
    }],
    series: [{
    type: 'bar',
    stacked: true,
    xField: 'xAxisVal',
    yField: ['totalMktValueLoss', 'totalMktValueGain'],
    title: [],
    style: {
    //opacity: 0.80,
    //background: '#F2F4F5',
    maxBarWidth: 30,
    minGapWidth: 10,
    strokeStyle: ['rgb(241, 153, 144)', 'rgb(134, 199, 142)'],
    'stroke-width': 1
    },
    label: {
    field: ['symbolLoss', 'symbolGain'],
    //display: 'none',
    //display: 'outside',
    //display: 'insideStart',
    display: 'insideEnd',
    //orientation: 'horizontal',
    //'text-anchor': 'middle',
    //calloutLine: false,
    innerPadding: {
    right: 10
    },
    background: '#f19990',
    height: '16px',
    color: 'black',
    //color: 'white',
    fontFamily: Portal.constants.ChartAxesFormatting.getFontFamily2(),
    fontSize: '9px',
    textTransform: Portal.constants.ChartAxesFormatting.getTextTransform1(),
    renderer: function(text, sprite, config, rendererData, index) {
    // Bar labels of gain chart gets overlapped with bar labels of loss chart only if
    // numeric value of any of them is less than (me.maxLengthOfAxis)/500
    // So, set the value of gain bar to (me.maxLengthOfAxis)/500 if it is less than (me.maxLengthOfAxis)/500
    // and set the value of loss bar to (-1 * (me.maxLengthOfAxis)/500) if it is greater than (-1 * (me.maxLengthOfAxis)/500)
    var labelDisplayValueLimit = (me.maxLengthOfAxis)/500;
    var totalMktValueGain = rendererData.store.getAt(index);
    var totalMktValueLoss = rendererData.store.getAt(index);
    var gainLossChart = this.getChart().up('largestgainlosschart');
    if (text === 'NONE1' || text === 'NONE2' || text === 'NONE3' || text === 'NONE4' || text === 'NONE5') {
    // total number of bars is 10
    if (gainLossChart.barCount === 10) {
    gainLossChart.barCount = 1;
    } else {
    gainLossChart.barCount++;
    }
    return {
    display: 'none'
    };
    } else {
    // total number of bars is 10
    if (gainLossChart.barCount === 10) {
    gainLossChart.barCount = 1;
    } else {
    gainLossChart.barCount++;
    }
    // logic to check whether gain bar or loss bar
    /*if (gainLossChart.barCount > 5) {
    // loss bar
    var tempTotalLoss = totalMktValueLoss.get('totalMktValueLoss');
    var negLabelDisplayValueLimit = -1 * labelDisplayValueLimit;
    if (tempTotalLoss > negLabelDisplayValueLimit) {
    totalMktValueLoss.set('totalMktValueLoss', negLabelDisplayValueLimit);
    }
    } else {
    // gain bar
    var tempTotalGain = totalMktValueGain.get('totalMktValueGain');
    if (tempTotalGain < labelDisplayValueLimit) {
    totalMktValueGain.set('totalMktValueGain', labelDisplayValueLimit);
    }
    }*/
    return {
    //color: '#ff0000',
    //display: 'none'
    //display: 'outside'
    //display: 'insideStart'
    display: 'insideEnd'
    };
    }
    }
    },


    //Start: this code (inside renderer method) is not required, check and confirm
    renderer: function (sprite, config, rendererData, index) { // modify or remove it
    if (sprite.getField() === 'totalMktValueGain') {
    if (rendererData.store.getAt(index).data.symbolGain.indexOf('NONE') === 0) {
    return {
    //fillStyle: 'green',
    //strokeStyle: 'none',
    hidden: true
    };
    } else {
    return {
    //fillStyle: 'green',
    //strokeStyle: 'none',
    hidden: false
    };
    }
    } else if (sprite.getField() === 'totalMktValueLoss') {
    if (rendererData.store.getAt(index).data.symbolLoss.indexOf('NONE') === 0) {
    return {
    //fillStyle: 'red',
    //strokeStyle: 'none'
    hidden: true
    };
    } else {
    return {
    //fillStyle: 'red',
    //strokeStyle: 'none'
    hidden: false
    };
    }
    }
    },
    //End: this code (inside renderer method) is not required, check and confirm


    tooltip: {
    trackMouse: true,
    style: 'background: #fff',
    renderer: function(tooltip, storeItem, item) {
    if (item.field === 'totalMktValueLoss'
    && storeItem.get('symbolLoss').indexOf('NONE') !== 0) {


    tooltip.setVisible(true);
    //tooltip.setHtml(storeItem.get('symbolLoss') + ': ' + storeItem.get(item.field));


    // use totalMktValueLossVal property of storeitem for tooltip
    tooltip.setHtml(storeItem.get('symbolLoss') + ': ' + storeItem.get('totalMktValueLossVal'));


    } else if (item.field === 'totalMktValueGain'
    && storeItem.get('symbolGain').indexOf('NONE') !== 0) {


    tooltip.setVisible(true);
    //tooltip.setHtml(storeItem.get('symbolGain') + ': ' + storeItem.get(item.field));


    // use totalMktValueGainVal property of storeitem for tooltip
    tooltip.setHtml(storeItem.get('symbolGain') + ': ' + storeItem.get('totalMktValueGainVal'));


    } else {
    tooltip.setHtml('');
    tooltip.setVisible(false);
    }
    viewModel.set('tooltip',tooltip);
    }
    },
    colors: ['rgb(241, 153, 144)', 'rgb(134, 199, 142)']
    }]
    }];


    me.callParent();
    },


    nFormatter: function(num) {
    var me = this;
    var formattedNumber;
    if (num >= 1000000000 || num <= -1000000000) {
    formattedNumber = (num / 1000000000).toFixed(1) + 'G';
    } else if (num >= 1000000 || num <= -1000000) {
    formattedNumber = (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000 || num <= -1000) {
    formattedNumber = (num / 1000).toFixed(1) + 'K';
    } else {
    formattedNumber = num.toFixed((num < 10 && num > -10 && num !== 0) ? 2 : 0);
    }
    //formattedNumber = '$' + formattedNumber;


    // Start: Logic to hide first and last numeric axis labels to get rid of cut in alignment
    if (num >= (me.maxLengthOfAxis - (me.maxLengthOfAxis / 10))
    || num <= ((me.maxLengthOfAxis / 10) - me.maxLengthOfAxis)) {
    return ' ';
    } else {
    return formattedNumber;
    }
    // End: Logic to hide first and last numeric axis labels to get rid of cut in alignment
    }
    });

    // please anyone know to fix this issue
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Sep 2017
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Yeah, you are right

Similar Threads

  1. [6.5.1.31] Pie Chart and overlapping labels
    By francescoList in forum Ext 6: Bugs
    Replies: 10
    Last Post: 26 Jul 2017, 3:28 PM
  2. Replies: 4
    Last Post: 7 Jun 2017, 6:37 AM
  3. Pie chart overlapping labels...again
    By francescoList in forum Ext 6: Q&A
    Replies: 3
    Last Post: 5 May 2017, 5:45 AM
  4. [OPEN] [5.0.1] Pie chart labels overlapping issue
    By Jump-BF in forum Ext 5: Bugs
    Replies: 14
    Last Post: 30 Dec 2016, 1:07 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •