In c3 js simple line chart when we zoom on x axis it won't generate more x-axis labels and ticks.
A Pen by Buddhika Chaturanga on CodePen.
In c3 js simple line chart when we zoom on x axis it won't generate more x-axis labels and ticks.
A Pen by Buddhika Chaturanga on CodePen.
<html > | |
<head> | |
<meta charset="UTF-8"> | |
<title>PMUI Graph Chart</title> | |
<link rel="stylesheet" href="css/c3.min.css"> | |
</head> | |
<body> | |
<div id="chart"></div> | |
<script src='js/d3.min.js'></script> | |
<script src='js/c3.min.js'></script> | |
</body> | |
</html> |
var chart = c3.generate({ | |
data: { | |
x:'x', | |
columns: [ | |
["x",1,4,15,67,89,100], | |
['data1', 30, 200, 100, 400, 150, 250], | |
['data2', 50, 20, 10, 40, 15, 25] | |
] | |
},axis: { | |
x: { | |
type:'indexed', | |
tick: { | |
culling:{ | |
max:50 | |
}, | |
count: 100, | |
fit: false, | |
extent: [0,100] | |
} | |
} | |
}, | |
zoom: { | |
enabled: true, | |
rescale: true, | |
extent:[0.5,50] | |
} | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.js"></script> |
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.css" rel="stylesheet" /> |