showXLabels - Option to display specified number of labels on X-Axis #521
Conversation
Chart.Core.js has been edited so, this option is available to any other chart as well if anybody wants to extend this feature.
hay-wire
changed the title
|
This is pretty neat. Can we get this in? |
|
+1 |
10 similar comments
|
+1 |
|
+1 |
|
👍 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 This would be extremely useful. |
|
+1 |
|
If it wasn't for this fork, I was gonna have to find an alternative to Chart.js. This is a critical feature. +1 |
|
Glad it helped so many of us :) |
|
👍 |
|
+1, does exactly what we need. |
|
+1 This would be great to have asap. It would be super helpful to have it default to 'auto' that would just kill labels as they get to cramped, keeping things responsive. |
|
Have you checked out 2.0 yet? |
|
+1 |
6 similar comments
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
This message was created automatically by mail delivery software. A message that you sent could not be delivered to one or more of its thnghm@gmail.com ------- This is a copy of the message, including all the headers. ------ Content preview: +1 --- Reply to this email directly or view it on GitHub: Content analysis details: (-5.4 points, 5.0 required) pts rule name description -5.0 RCVD_IN_DNSWL_HI RBL: Sender listed at http://www.dnswl.org/, high ----==_mimepart_56b63277e55be_46b93fdc2a9d12a01107d1 +1 Reply to this email directly or view it on GitHub: +1 — ----==_mimepart_56b63277e55be_46b93fdc2a9d12a01107d1-- |
|
+1 |
|
+1 The xScaleOverride option requires additional logic to calculate (xScaleStartValue, xScaleStepWidth) that should be handled in the chart.js |
|
It's neither merged for a 2 year, nor solution proposed. What's the workaround for that issue? |
|
+1 |
|
@alexbeletsky would be nice if there was a way to do it, or simply a comment about the state of this ... |
|
Guys just use highcharts like I did, and please for the love of God no more +1 comments |
|
@HWDexperte As far as I understood, this will never be merged. Instead, in v2.0.0-beta they have http://nnnick.github.io/Chart.js/docs-v2/ Meanwhile, I ended up by just using empty labels, where I don't need them (I render some calendar-based data, so skip every 3 days). I read some critics about it, but it works fine, and it's good enough for me. @briankip +1 are nice, it shows the interest of the community to a particular issue. Reactions introduced not that long time ago. See no reason, not use it. |
|
@alexbeletsky @HWDexperte V2 does have an At the same time, you can disable the auto-skipper and manually filter labels. The labels on each axis are run through a callback. If you return an empty string from the callback the grid-line will still show but there will be no text. If you return I've created a fiddle from the relevant v2 sample at https://jsfiddle.net/1zobrr4j/6/ If you want to remove the grid lines from the hidden labels, you can change the callback to callback: function(dataLabel, index) {
return index % 2 === 0 ? dataLabel : null;
} |
|
@briankip thx man. It looks really nice. Will try it. |
|
This works like a charm. Perfect! |
|
@etimberg Is there a way to use your callback solution to filter labels on the axis while still showing the labels in each tooltip? I'm using |
|
This is an excellent solution. I'm showing this in mobile environment so it's a must to have this skipping. I would like to remove the x-axis label vertical line (the little one coming from the horizontal axis that divides each step) when there's no label to show (this might be some css to modify), but I don't know where to start looking. Any ideas? |
|
Hello, guys. I tried the code above and it works very well, but I have a problem when it appears null in the tooltips, when passing the mouse the correct data appears but in the course of the graph appears null. The timestamp is correct in the X bar, but I need to show all the timestamp on the tooltips when moving the mouse in the graph. My code Img Sameone can give me a light? |
|
Guys, I found the solution. I remove the callback for just one line -> maxTicksLimit: 15, Url: [(https://stackoverflow.com/questions/22064577/limit-labels-number-on-chart-js-line-chart/26748301)] |
Update : Refer updated PR here: #897
Original :
Applicable to bar chart and line chart.
User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)
Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.
Please see the attached images for a comparison. the second graph has been passed { showXLabels: 10 } into option.