C3: scatter chart: enable configuring color opacity of points

[TomasTomecek]

I'm struggling with configuration of opacity of colors in scatter plot. No matter how I change color and colors, opacity of points is still set to random (or at least that's what I feel it is). I'd like to a) either be able to configure it myself b) or disable it completely and let all points have same opacity.

Is this possible somehow?

I appreciate any kind of feedback, thank you!

Sample data:

  data: {
    json: json_data,
    keys: {
      value: ["date", "hours"]
    },
    x: 'date',
    xFormat: '%Y-%m-%d',
    type: 'scatter',
    color: function(color, d){ return "#ddd"; },
    colors: {  // has no effect
      hours: '#ff0000',
      date: '#00ff00'
    }
  };

[pchaganti]

👍

[conceptualspace]

+1

even the opacity in the scatterplot example seems random: http://c3js.org/samples/chart_scatter.html

i think the idea was that the points should get darker towards the median?

[joeclayallday]

Here's how to force the opacity to 1 with CSS:

.c3-circle {
opacity: 1 !important;
}

[joeclayallday]

This line: https://github.com/c3js/c3/blob/master/c3.js#L1932

return isValue(d.value) ? this.isScatterType(d) ? 0.5 : opacity : 0;

Has caused some frustration. Currently all visible scatterplot dots are shown at half opacity. It would be awesome if this was configurable in the JS like others have mentioned above.

[joeclayallday]

Here's another way to address the half-opacity issue: use onrendered. In jQuery, search for every .c3-circle class matching opacity: 0.5; and overwrite the styles to be opacity: 1;

onrendered: () => {
  $(function () {
    $('.c3-circle').filter(function () {
        return $(this).css('opacity') == '0.5';
    }).css('opacity', '1');
  });
}

[looqmaan]

I was able to update the opacity of the circles (only the active ones). Hope this helps someone.

.c3-circles .c3-circle-active {
    opacity: 0.7!important;
}

import c3 from "c3";
import * as d3 from "d3";

const chart = c3.generate(props);
const chartData = chart.data();
for (const i in chartData) {
    for (const index in chartData[i].values) {
        const item = chartData[i].values[index];
        if (item.value === null) {
            continue;
        }
        d3.selectAll(`.c3-circles-${item.id}`)
            .select(`.c3-circle-${item.index}`)
            .classed('c3-circle-active', true);
    }
}

[blazespinnaker]

the config architecture is pretty super extensible, afaics.

I just added

return isValue(d.value) ? (this.isScatterType(d) ? this.**config.point_scatter_opacity** : opacity) : 0;

and then added

point_scatter_opacity: 0.5,

to the getDefaultConfig next to point_show

config looks like this:

},```

            point: {
                show: false,
                r: 4,
                scatter: {
                    opacity: 1
                }
            },

```