I created an area chart and want the keep the opacity 1.0 of the area under the line, but when I select a line, the opacity goes away and stays away for all the lines too. I'm wondering how I can keep the opacity for the areas under the lines no natter what?
I've tried doing mouseover/ mouseout but that doesn't do exactly what I want it to all the time, because I have to pause a little bit over the legend for the mouseout to work. I did this by creating a new legend, and here is code for that. I've tried a lot of other simpler things, and tried to code in refreshing the data, but this is the closest I got to following this site:
https://c3js.org/samples/legend_custom.html
//this part is the new legend part, but can be added after the foundation part.
//or it may be omitted too.
function toggle(id) {
chart.toggle(id);
}
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
.data(['data1', 'data2', 'data3'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
d3.select(this).style('background-color', chart.color(id));
})
.on('mouseover', function (id) {
chart.focus(id);
//chart.flush();
d3.selectAll(".c3-area").style("opacity", "1.0");
})
.on('mouseout', function (id) {
chart.revert();
//chart.flush();
d3.selectAll(".c3-area").style("opacity", "1.0");
})
.on('click', function (id) {
chart.toggle(id);
d3.selectAll(".c3-area").style("opacity", "1.0");
});
//this part is the foundation
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50],
['data3', 100, 200, 0, 300, 350, 220]
],
types: {
data1: 'area',
data2: 'area-spline',
data3: 'area'
}
}
});
d3.selectAll(".c3-area").style("opacity", "1.0");
I expected for the opacity to stay 1.0, which it does, until I click on the selection tool on the bottom and then the opacity resets back to something like 0.3, or whatever the default is. There are no error messages for me.
I also tried this and it doesn't work:
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
},
style: {
opacity: 1.0
},
legend: {
item: {
onclick: function (id) {
//d3.selectAll(".c3-area").style("opacity", 1.0);
chart.load();
d3.selectAll(".c3-area").style("opacity", 1.0);
//chart.load();
}
}
}
}
});
Using the onrendered function in the config may be what you want
http://jsfiddle.net/9t24cz8q/
var chart = c3.generate({
bindto: "#areachart",
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
}
},
onrendered: function () {
d3.selectAll(".c3-area").style("opacity",1);
}
});
Here, the opacity of the series area moused over in the legend is set to 1, and the others return to 1 afterwards.
Related
I have a C3 chart with data as given in columns.
Notice that there are null values in data1 and in between data 3. C3 is trying to display my bar chart in groupings of 5, creating a separate bar for null values. I'm trying to hide these null values.
var chart = c3.generate({
data: {
x : 'x',
line:{connect_null: true},
columns: [
['x','x1' ,'x2', 'x3', 'x4', 'x5', 'x6', 'x7'],
['data1',null ,30, 200, 100, 400, 150, 250],
['data2',null ,130, 100, 140, 200, 150, 50],
['data3',null ,130, null, 200, 300, -200, 100],
['data4',null ,20, -90, 200, 130, -20, 90],
['data5',-90, 20, -90, 200, 130, -20, 90]
],
type: 'bar'
},
axis: {
x: {
type: 'category', // this needed to load string x value
}
},
bar: {
width: {
ratio: 0.7 // this makes bar width 50% of length between ticks
},
space:0.05
// or
//width: 100 // this makes bar width 100px
}
});
output(https://i.stack.imgur.com/PVei1.png)
How can I hide the bars with null values?
I am using word-cloud2 with echarts:
Is there any option to add onclick to each word on echarts word-cloud2. My code is in js and is as follows:
var chart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [ {
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'apple',
width: 600,
height: 400,
tooltip: {
width: 0,
height: 0,
},
drawOutOfBound: true,
data: [
{
name: 'Machine Learning',
value: 10000,
},
]
} ]
};
chart.setOption(option);
window.onresize = chart.resize;
after your call to setOption add this:
chart.on('click', 'series.wordCloud', function (el) {
console.log(el);
// add your custom logic here
});
In C3 bar charts, when we set Width Ratio to less than 1, then the bar squeezes but the tooltip area does not. How can we set the tool tip to only show over bar not on the whole area like in the following example.
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},bar: {
width: { ratio: 0.5 }
},
grid: {
y: {
lines: [{value:0}]
}
}
});
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3']])
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data4', 100, -50, 150, 200, -300, -100]]
});
}, 1500);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.js"></script>
<div id="chart"></div>
Have you checked tooltip property? https://c3js.org/reference.html#tooltip-contents
When the names of x axis are big the text is overlapping. Is there any property to fix this ? Fit:true doesn't resolve the problem.
Example
You can use x axis tick rotate, example: http://c3js.org/samples/axes_x_tick_rotate.html
There is another solution where you can use
multiline: true
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 0,
multiline: true
}
}
}});
From the example of c3.js, a scatterplot is generated by
data: {
x: 'setosa_x',
columns: [
["setosa_x", ...SOME DATA...],
["setosa", ...SOME OTHER DATA...],
],
type: 'scatter'
},
and google and stackoverflow taught me that i can change the radius of bubbles of scatterplot with this manner:
point: {
r: function(d) { // <- d has x, value, and index
return d.x+d.value+d.index;
}
}
in this way, i can access all information (x, value, index) given the data column has only x and value data for changing the radius. But I'd like to append additional data for the radius, and access the data via this radius function r: function(d) {}. Thanks in advance!
Do you mean like this?
var otherData = [17, 11, 4, 8, 12, 34]
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'scatter',
},
point: {
r: function(d) { return otherData[d.index]; },
}
});