I want to make line appear dashed between two points in the chart.Here is my code:
<!DOCTYPE html>
<html>
<head>
<!-- Include the C3.js and D3.js libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
// Sample data for the line chart
var data = {
columns: [
['data1', 30, 200, 100, 400, 150, 250], // Sample line data (data1)
],
regions: {
data1: [{start: 2, end: 4, style: 'dashed'}],//
},
};
// Chart configuration
var chart = c3.generate({
bindto: '#chart',
data: data,
axis: {
x: {
},
y: {
},
},
point:{
show:false
}
});
</script>
</body>
</html>
With the above, I was able to make a dashed region between selected intervals but I was not able to customize the spacing of dashed lines.