c3
c3 copied to clipboard
scatter chart: enable configuring color opacity of points
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'
}
};
👍
+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?
Here's how to force the opacity to 1 with CSS:
.c3-circle { opacity: 1 !important; }
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.
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');
});
}
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);
}
}
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
}
},