CODEWITHSUNDEEP
htmlcssd3.jsnvd3.js
Raphael Sampaio
Raphael Sampaio

Reputation: 143

Change the background color of the focus chart in NVD3

Does anyone knows if it is possible to modify the background of the focus bar of the lineWithFocusChart in NVD3?

enter image description here

Upvotes: 1

Views: 849

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38211

Because NVD3 is built on d3, you can use d3 functionality to select the rectangles that make up the background of the focus bar and change their styling. As NVD3 has standardized classes for parts, this should look like:

d3.selectAll(".nv-brushBackground").selectAll("rect") // select the rectangles in the background group(s)
  .style("fill","steelblue") // style as desired
  .style("opacity",0.8);

example

nv.addGraph(function() {
 var chart = nv.models.lineWithFocusChart();
   chart.brushExtent([50,70]);
   chart.xAxis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1");
   chart.x2Axis.tickFormat(d3.format(',f'));
   chart.yTickFormat(d3.format(',.2f'));
   chart.useInteractiveGuideline(true);
   d3.select('#chart svg')
     .datum(testData())
     .call(chart);
   nv.utils.windowResize(chart.update);
		
	 d3.selectAll(".nv-brushBackground").selectAll("rect")
		 .style("fill","steelblue")
		 .style("opacity",0.8);
   
   return chart;
 });
   
 function testData() {
   return stream_layers(3,128,.1).map(function(data, i) {
     return {
       key: 'Stream' + i,
       area: i === 1,
       values: data
     };
  });
}
	
	
/// stream_layers.js:

/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}

function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}
text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
html, body, #chart, svg {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js"></script>

<div id="chart" class='with-3d-shadow with-transitions'>
    <svg></svg>
</div>

Upvotes: 6

Related Questions