krispo / angular-nvd3

AngularJS directive for NVD3 reusable charting library (based on D3). Easily customize your charts via JSON API.
http://krispo.github.io/angular-nvd3
MIT License
1.29k stars 377 forks source link

X axis Alignment is not showing properly #671

Open allenwesley1985 opened 7 years ago

allenwesley1985 commented 7 years ago

area chart chart-area x-axis labels are not coming at correct positions.

Below Chart JSON DATA { "clientResponse": { "chartData": [ { "key": "Ambulatory Surgery Center", "color": "#F39C12", "values" : [ [ 1325356200000 , 15695863.02] , [ 1333218600000 , 10834801.08] , [ 1341081000000 , 8330336.74], [ 1349029800000 , 9457885.59],[ 1356978600000 , 4716081.84] , [ 1364754600000 , 6393818.42] , [ 1372617000000 , 6606281.76], [ 1380565800000 , 5984860.55]] }, { "key": "Lakewood", "color": "#3498DB", "values" : [ [ 1325356200000 , 4767448.43] , [ 1333218600000 , 6289200.37] , [ 1341081000000 , 3998624.91], [ 1349029800000 , 4840914.05],[ 1356978600000 , 4653079.24] , [ 1364754600000 , 3096233.85] , [ 1372617000000 , 3336640.83], [ 1380565800000 , 2359606.01]] }, { "key": "LutheranHospital", "color": "#A3E4D7", "values" : [ [ 1325356200000 , 5692692.6] , [ 1333218600000 , 3065132.55] , [ 1341081000000 , 4283280.99], [ 1349029800000 , 2972673.35],[ 1356978600000 , 2821861.6] , [ 1364754600000 , 3585908.07] , [ 1372617000000 , 323328.46], [ 1380565800000 , 174632.31]] }, { "key": "WellnessCenter", "color": "#006400", "values" : [ [ 1325356200000 , 23233800.42] , [ 1333218600000 , 18944129.81] , [ 1341081000000 , 19343644.03], [ 1349029800000 , 18199950.11],[ 1356978600000 , 21131200.82] , [ 1364754600000 , 18782820.48] , [ 1372617000000 , 16690123.16], [ 1380565800000 , 17314507.92]] } ] }, "status": "success" }

OPTIONS FOR CHART let chart = { chart: { type: 'stackedAreaChart', height: 530, useInteractiveGuideline: true, showControls: false, margin: { top: 100, right: 25, bottom: 20, left: 75 }, x: function (d: any) { console.log('area x = '+ d[0]); return d[0]; }, y: function (d: any) { console.log('area y = '+ d[1]); return d[1]; }, useVoronoi: false, clipEdge: false, duration: 100,

            legend: {
                margin: {
                    top: 10,
                    right: 35,
                    bottom: 5,
                    left: 10
                }
            },

            xAxis: {
                showMaxMin: true,
                tickFormat: function (d: any) {
                    if(d3.time.format('%m')(new Date(d)) <=3 ) {
                        return d3.time.format('%Y')(new Date(d)) + '-Q1';
                    }else if( d3.time.format('%m')(new Date(d)) <=6 ) {
                      return d3.time.format('%Y')(new Date(d)) + '-Q2';
                    }else if(d3.time.format('%m')(new Date(d)) <=9 ) {
                      return d3.time.format('%Y')(new Date(d)) + '-Q3';
                   } else {
                      return d3.time.format('%Y')(new Date(d)) + '-Q4';
                   }

                }
            },
            yAxis: {
                tickFormat: function (d: any) {
                    return d3.format(',.2f')(d);
                }
            }

        }
    };

Am struggling in this please provide a solution

fopsdev commented 6 years ago

same here...