Comments (10)
You can use axis.x.tick.count
option like axis.x.tick.count = 5
.
Sample is here - http://c3js.org/samples/axes_x_tick_count.html
Please try this.
Thanks.
from c3.
ok, understand this.. but is there a way to change it while the chart is in the page.. ie, dynamically load it?
chart.load({
axis: {
x: {
tick: {
count : 20
}..
from c3.
Would be great if we could pass a function to the tick.count so it would update automatically .e.g
tick: {
count: function () {
return chart.size.width / 10;
}
}
Also, the tick.count seems to be a little buggy at the moment. When this is set to certain values it draws a different number of ticks.
e.g.
tick.count = 4, actually draws 7
tick.count = 3, actually draws 2
from c3.
http://jsfiddle.net/e482V/8/ is an example where count is ignored when set to 5.
http://jsfiddle.net/e482V/9/ is an example where 3 is set but 2 is in the chart.
http://jsfiddle.net/e482V/10/ is where 4 is set, only 2 in the chart
if you set 5... it no longer listens to count
from c3.
Thank you for your troubleshooting, but it might be not easy to fix this because c3 uses d3 native function to set tick count..
Anyway, I'll check about this more.
@JakeSidSmith Hi, I agree with your idea. I'll add that functionality later.
from c3.
@masayuki0812 Any news on this one?
from c3.
Sorry, there is not, but I'm considering to use categorized axis. I'll try later.
from c3.
@chris-Opsimize I think this has been fixed and could you try on the latest version 0.1.27
?
from c3.
Looks grand!
from c3.
I am facing one issue in X axis values. See my code below
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="c3.js"></script>
<script>
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 'Shenzhen', 'Haiphong', 'Antwerp', 'Chennai', 'Memphis Rail Ramp', 'Los Angeles / Long Beach / San Pedro', 'Shanghai', 'Shanghai'],
['Your lowest rate', 30, 200, 100, 400, 300, 25, 1000, 40000,20000,23000],
['Benchmark rate', 400, 200, 100, 4000, 1900, 100, 1400, 250,16000,19000],
['Lowest rate on route', 350, 15000, 19000, 16210, 16000, 12040, 12510, 18800,19500,11150],
],
type: 'bar'
},
axis: {
x: {
type: 'category' // this needed to load string x value
},
y: {
label: {
text: 'Your Y Axis',
position: 'outer-middle'
},
tick: {
values: [1000, 5000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000]
}
}
},
});
I have used "Shanghai" at two places in X axis value. Now its showing the position of Shanghai in array not name when I am plotting the graph. See attached graph image. How can I show the duplicate name in X - axis ..... because in my case there can be duplicate records in X- axis.
from c3.
Related Issues (20)
- Grouped bar chart different rect width in group
- Chart data from json after value click place are changing
- d3-color library security issue HOT 5
- How to change the c3 bar chart x axis label color?
- How can I change multiline for c3js bar chart x axis tick text
- Proper y/y2 axis ticks as per the given tick count
- Setting data.names with object's properties
- There is probably a better performing way for point show false
- Missing column in bar chart derived from data.json where the x value is 'empty'
- TypeError: 'undefined' is not an object (evaluating 'e.schemeCategory10') HOT 2
- data.color function based on d.value does not change chart color
- Insecure Randomness for the useof Math.random() in redrawBarForSubchart, redrawLineForSubchart and redrawAreaForSubchart(security vulnerability) HOT 2
- Cannot read properties of undefined (reading 'schemeCategory10') HOT 1
- Problem with rendering dates
- 2023: Uncaught TypeError: d3.mouse is not a function
- Keyboard accessibility for legends and and tooltips
- D3 5.16.0: data.labels.format regression
- d3-color version 1.4.1 vulnerability dependent with c3 latest version
- bar chart animation and transition problem
- Issue in angular 17 I use c3 graphs which is making whe site freeze and getting blanket page for some seconds
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from c3.