CODEWITHSUNDEEP
javascriptcssnvd3.js
thgnuyen
thgnuyen

Reputation: 159

NVD3 Scatter Plot Point Opacity

I been trying to set the opacity of the points of a scatter plot generate by nvd3. I tried to use CSS to set the opacity of the points but it didn't work. Any idea on how to set the opacity?

This is the code that I use to generate the graph:

var data = [
  {
    key: "group1",
    values:[
    {
        x: 10,
        y: 10
    },
    {
        x: 20,
        y: 10
    },
    {
        x: 30,
        y: 10
    }
    ]
  }
]

nv.addGraph(function() {
  var chart = nv.models.scatterChart()
                .showDistX(false)
                .showDistY(false)
                .color(d3.scale.category10().range())
                .pointRange([100,100]);

  chart.xAxis.tickFormat(d3.format('.02f'));
  chart.yAxis.tickFormat(d3.format('.02f'));
  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

The link to the jsfiddle

Thank you.

Upvotes: 0

Views: 618

Answers (1)

shabeer90
shabeer90

Reputation: 5151

You can override the nv.d3.css to achieve this

.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
  fill-opacity: 0.8 !important;
  stroke-opacity: 0.8 !important;
}

Hope it helps.

Upvotes: 1

Related Questions