Skip to content

Instantly share code, notes, and snippets.

@macxfadz

macxfadz/c3-axis-x-zoom-tick-generating-bug.markdown

Created August 8, 2017 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save macxfadz/e5adb5f97c689fa0fb12ed9807de8887 to your computer and use it in GitHub Desktop.
Save macxfadz/e5adb5f97c689fa0fb12ed9807de8887 to your computer and use it in GitHub Desktop.
Download ZIP
C3 axis-x Zoom tick Generating bug
Raw
c3-axis-x-zoom-tick-generating-bug.markdown

C3 axis-x Zoom tick Generating bug

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.

License.

Raw
index.html
<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>
Raw
script.js
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]
}
});
Raw
scripts
<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>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment