When I use c3.js for chart with d3.v3.min.js, it show chart with shadow block like this image
I want only with simple line without black area. Like this one.
How should I do? Please
UPDATED
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Websit</title>
<script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/d3.v3.js"></script>
<script src="<?php echo base_url(); ?>assets/js/c3.js"></script>
<script>
$(function(){
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
As previously oriented in the comments, just set the
fill
tonone
:Or:
Here, I'm using the class
c3-shape
just to be more specific, because the axis is also a path.Here is the demo: