Search code examples
dimple.js

dimple.js - modify shape to be unfilled bubble depending on value of 'Channel'

Looking for suggestions on how I can modify the example dimple.js code in link below so the output is a filled/unfilled circle depending on the value of the 'Channel' variable?

http://dimplejs.org/examples_viewer.html?id=bubbles_vertical_grouped

Picture below is an example of the result I am looking to achieve.

result looking for

Solution

  • You can just do:

    chart.assignColor("Supermarkets", "transparent", "blue");

    Where the third parameter is whatever you want the outline colour to be. If you want thicker borders like your picture you can do that after drawing with:

    svg.selectAll("circle").style("stroke-width", 5);

    To be a bit more specific you can assign the series to a variable and access them that way:

    var series = myChart.addSeries("Channel", dimple.plot.bubble);
myChart.draw();
series.shapes.style("stroke-width", 5);

    Or you can set the stroke-width in CSS.