We Keep Coding

how to set tooltip content of scatter chart in c3 chart?

I am trying to plot a c3 scatter chart. On mouse hover on tool tip, it shows data set name. Instead i want to display a custom text on that tool tip. My code snippet is below.current image
var chart = c3.generate({
bindto: '#scatter',
data: {
xs: {
positive: 'positive_x',
negative: 'negative_x',
neutral: 'neutral_x'
},
columns: [
$scope.positiveXvalue,
$scope.positiveYvalue,
$scope.negativeXvalue,
$scope.negativeYvalue,
$scope.neutralXvalue,
$scope.neutralYvalue
],
colors: {
positive: '#008000',
negative: '#FF0000',
neutral: '#A9A9A9'
},
type: 'scatter'
},
axis: {
x: {
label: 'Sentiment',
tick: {
fit: false
}
},
y: {
label: 'Followers'
}
});
How to add a custom label on mouse hover(as tool tip)?

You must be looking for tooltip.format.title.
For a scatter plot there is some difference.
Function specified at tooltip.format.title recieve coordinates of hovered data-point. For a traditional line/bar chart it is just integer index.
But for scatter plot it goes in 'x.y' format. So you may have a need to split it:
tooltip: {
format: {
title: function (coord) {
var xy = coord.toString().split('.');
return 'Data at [' + xy[0] + ',' + xy[1] + ']';
}
}
}
Further implementation depends on how your custom titles are stored.

How to rescale x-axis of time series (C3js)?

In C3.js there's a way to rescale the y-axis when you zoom in. Does a similar function exist for the x-axis?
Similar code from the chart
var visualizeThis = c3.generate({
bindto: '#this',
data: {
x: 'Dates',
columns:[
dates,
dataPoints
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d/%Y'
}
}
},
zoom: {
enabled: true,
rescale: true //this only rescales the y-axis
},
point: {
show: false
}
});

In c3.js the zoom affects to x-axis as shown by this example.
If you want to scale y-axis also, you can try zoom.rescale option.
zoom: {
enabled: true,
rescale: true
}
Working example on jsfiddle.

C3 graph overlapping x-axis label

C3 graph overlap x-axis labels which is in date time format. I have googled this query but didn't get any solution for it.Is it possible that c3 only shows couple of date time rather then showing altogether which result in overlap x-axis labels
var data = {
x: 'x',
xFormat:'%Y-%m-%d/%H:%M',
empty: {
label: {
text: "No Data"
}
},
columns: [
['x', '{$dateArray}'],
['Attack', {$data}],
],colors: {
Attack: '#67b7dc',
},
types: {
Attack: 'area'
}};
var chart = c3.generate({bindto: '#chart1',
size: {
height: 630,
},
data: data,
grid: {
x: {
show: true
},
y: {
show: true
}
},
tooltip: {
format: {
value: function (value, ratio, id) {
var format = value+' Gbps [ IP: '+destIp[value]+' ]';
return format;
}
}
},
zoom: {
enabled: true
},
subchart: {
show: true
},axis: {
x: {
type: 'timeseries',
tick: {
format: '%b %d, %H:%M',
rotate: 90,
multiline: false
}
},
y: {
tick: {
format: function (d) {
return d.toFixed(3);
}
},
label: {
text: 'Attack Size ( Gbps )',
position: 'outer-middle'
}
}
}
});

Use c3.js chart config tick.count, set it to desired integer value like 2,3 or 4.
Use c3.js Timeseries Chart exmaple to play with this config.
Problem without tick.count:-
Problem solved with tick.count config:-

Dynamic labels for c3.js (also, label colors)

I have the following c3.js code to make a bar graph that builds up from 0 (animates from 0 to the value of each bar). The graph also has a label that animates along with it. The label shows the final value of the graph.
Here's a fiddle
blankData=[
['data1',0,0,0,0],
['data2',0,0,0,0],
['data3',0,0,0,0]
]
chartData=[
['data1',60,10,4,25],
['data2',30,22,5,30],
['data3',30,9,4,17]
]
var chart = c3.generate({
bindto: '#chart',
size: {
height: 500,
},
data: {
columns: blankData,
colors:{
data1:'#00af50',
data2:'#F7931E',
data3: '#FF0000'
},
names:{
data1:'namedata1',
data2:'namedata2',
data3:'namedata3'
},
type:'bar',
labels: true,
},
tooltip: {
show: false
},
legend: {
show: false
},
axis: {
x: {
type: 'category',
categories: ['001', '002','003','004'],
tick: {
format: function (d) {
return "" ; }
}
}
},
transition: {
duration: 2000
}
});
setTimeout(function () {
chart.load ({columns: chartData});
}, 500)
This works nicely, but I'd like the labels to "build up" along with the animated bars. That is, the labels would start at 0 and increase up to the final value of the bar, as the bar animates.
Also, as a side question, would anyone know which attribute in the .css file to change to make the labels colored black? By default, the labels are the same color as the bars.
Any help would be appreciated. Thanks!

Is there a way to change the type of the subcharts in c3.js

I have made a bar char chart and it also has a sub chart. I want to change the type of the subchart to line. As in, the main chart should be a bar chart but the subchart of this should be a line chart.
This is the piece of code I am using to generate the chart. But the type of subchart is not working.
var chart=c3.generate({
bindto:bindTo(),
data:{
x:'x',
/* value:['Percent DEP Enabled'],*/
columns:data(),
type: 'bar'
},
subchart: {
show: true,
size: {
height: 25
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m-%d-%y',
rotate: -45,
},
height: 75
},/* y: {
tick: {
values: function(){
jQuery.forEach(function(){
})}
count: 8,
format:d3.format(".2s"),
},
},*/
subchart: {
show: true,
type: 'line',
}
}
});

You can't do this because there is no setting like axis.subchart. When you take a look at the reference you'll find everything you need but in your case there is no option.