krispo / ng2-nvd3

Angular2 component for nvd3
http://krispo.github.io/ng2-nvd3/
MIT License
328 stars 104 forks source link

LineWithFocusChart: xScale not reflecting on focus chart #127

Open antumin opened 7 years ago

antumin commented 7 years ago

When I set xScale of lineWithFocusChart to d3.time.scale() it is not reflected to the focus chart. Is it possible to change the xScale of the focus chart manually? However I thing that the default behaviour should be that it is reflected automatically.

My Code looks as follows:

let  tickMultiFormat = d3.time.format.multi([
      ["%-H:%M Uhr", function(d) { return d.getMinutes(); }], 
      ["%-H:%M Uhr", function(d) { return d.getHours(); }], 
      ["%-d. %b", function(d) { return d.getDate() != 1; }], 
      ["%-d. %b", function(d) { return d.getMonth(); }], 
      ["%Y", function() { return true; }]
    ]);
    this.options = {
      chart: {
        type: 'lineWithFocusChart',
        height: 350,
        margin : {
          top: 20,
          right: 20,
          bottom: 50,
          left: 100
        },
        clipEdge: false,
        xScale: d3.time.scale(),
        // useInteractiveGuideline: true,
        focusHeight: 80,
        // forceY: [min-(max-min)*0.05, max+(max-min)*0.05],
        interpolate: 'monotone',
        x: function(d){ return d.x; },
        y: function(d){ return d.y; },
        xAxis: {
          axisLabel: 'Zeit',
          showMaxMin: false,
          tickPadding: 10,
          tickFormat: function(d){
            return tickMultiFormat(new Date(d));
          }
        },
        showX2Axis: false,
        x2Axis: {
          showMaxMin: false,
          tickPadding: 10,
          tickFormat: function(d){
            return tickMultiFormat(new Date(d));
          }
        },
        yAxis: {
          axisLabel: this.unitString,
          axisLabelDistance: 10,
          tickFormat: function(d){
            return d3.format('.02f')(d);
          },
        },
      }
    };

The resulting chart looks like that:

unbenannt

onitra commented 6 years ago

From https://stackoverflow.com/questions/35744202/nvd3-time-formatting-line-with-focus-chart/40713282, Kashyap's comment:

"In latest nvd3, you have to use following to update xScale. chart.xScale(d3.time.scale()); chart.focus.xScale(d3.time.scale());"

We went mad looking for this!

MandarShaha commented 6 years ago

my chart is not in sync with focus when I use chart.focus.xScale(d3.time.scale());, any pointers on this?