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" /> |