C3.js drawing lines between two different columns or data series - c3.js

Question

I have three time series which are plotted on the same graph using null values so that only one series is displayed for any one time, basically to get different colouring for rising and falling points.
Does anyone know how I can link the points together with lines even though they are from different series? I know with a bar chart you can use a group feature for different series to have them display on top of each other, however this doesn't seem to work for line. Here is a picture of the unconnected dots:

Answer 1

If you present the data to C3 as separate series with nulls where the series should not plot, then you get something like your required affect. In this snippet I have used two series - you would want a series per rising and falling set of points.
var chart = c3.generate(
{
bindto: '#chart',
size: {
width: 600,
height: 180
},
data: {
x: 'xLabels',
columns: [
['xLabels', '2015-09-17 00:00:00','2015-09-18 00:00:00','2015-09-19 00:00:00','2015-09-20 00:00:00','2015-09-21 00:00:00','2015-09-22 00:00:00','2015-09-23 00:00:00','2015-09-24 00:00:00'],
['data1', 5,10,12,17,null,null,null,null],
['data2', null,null,null,null,17,13,12,11],
['data3', null,null,null,17,17,null,null,null],
],
xFormat: '%Y-%m-%d %H:%M:%S', // ### IMPORTANT - this is how d3 understands the date formatted in the xLabels array
types: {
'data1': 'area-spline',
'data2': 'area-spline',
'data3': 'line'
},
colors: {
data3: '#cccccc'
}
},
point: {
show: true
},
legend: {
position: 'inset',
inset: {
anchor: 'top-left',
x: 20,
y: 10,
step: 2
}
},
axis: {
y: {
tick: {
format: function (d) { return d + "%"; }
}
},
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d' // how the date is displayed
}
}
},
tooltip:{
format:{
title:function (x) { return x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear() + " " + x.getHours()+ ":" + x.getMinutes() },
}
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.6.7/c3.min.js"></script>
<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>