feat: customize number of axis ticks#319
Conversation
Codecov Report
@@ Coverage Diff @@
## master #319 +/- ##
==========================================
+ Coverage 98.04% 98.04% +<.01%
==========================================
Files 37 37
Lines 2715 2716 +1
Branches 636 631 -5
==========================================
+ Hits 2662 2663 +1
Misses 48 48
Partials 5 5
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Tested locally, looks great.
What is the logic that determines where to place the tick when one tick is desired like this 👇 and is there a way to center that tick, bandwidth? for example on a max scale of 30 should be 15.
Also shouldn't there always be a max tick? Seems like a separate thing/option i.e.
- show max/min tick
- show X number of ticks between min and max
|
Hey @nickofthyme so we are using https://github.com/d3/d3-scale#continuous_ticks to generate human readable ticks on axis. This unfortunately doesn't allows us directly to specify to show min and max labels but we can add that manually on the code. We can do that my adding also the |
# [10.0.0](v9.2.1...v10.0.0) (2019-08-21) ### Bug Fixes * **tooltip:** ie11 flex sizing ([#334](#334)) ([abaa472](abaa472)), closes [#332](#332) * decuple brush cursor from chart rendering ([#331](#331)) ([789f85a](789f85a)), closes [elastic/kibana#36517](elastic/kibana#36517) * remove clippings from chart geometries ([#320](#320)) ([ed6d0e5](ed6d0e5)), closes [#20](#20) ### Features * auto legend resize ([#316](#316)) ([659d27e](659d27e)), closes [#268](#268) * customize number of axis ticks ([#319](#319)) ([2b838d7](2b838d7)) * **theme:** base theme prop ([#333](#333)) ([a9ff5e1](a9ff5e1)), closes [#292](#292) ### BREAKING CHANGES * **theme:** remove `baseThemeType` prop on `Settings` component and `BaseThemeTypes` type. * `theme.legend.spacingBuffer` added to `Theme` type. Controls the width buffer between the legend label and value.
|
🎉 This PR is included in version 10.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [10.0.0](elastic/elastic-charts@v9.2.1...v10.0.0) (2019-08-21) ### Bug Fixes * **tooltip:** ie11 flex sizing ([opensearch-project#334](elastic/elastic-charts#334)) ([2683333](elastic/elastic-charts@2683333)), closes [opensearch-project#332](elastic/elastic-charts#332) * decuple brush cursor from chart rendering ([opensearch-project#331](elastic/elastic-charts#331)) ([b5b8dde](elastic/elastic-charts@b5b8dde)), closes [elastic/kibana#36517](elastic/kibana#36517) * remove clippings from chart geometries ([opensearch-project#320](elastic/elastic-charts#320)) ([497efa4](elastic/elastic-charts@497efa4)), closes [opensearch-project#20](elastic/elastic-charts#20) ### Features * auto legend resize ([opensearch-project#316](elastic/elastic-charts#316)) ([be4a53d](elastic/elastic-charts@be4a53d)), closes [opensearch-project#268](elastic/elastic-charts#268) * customize number of axis ticks ([opensearch-project#319](elastic/elastic-charts#319)) ([a7a4ecd](elastic/elastic-charts@a7a4ecd)) * **theme:** base theme prop ([opensearch-project#333](elastic/elastic-charts#333)) ([0b38770](elastic/elastic-charts@0b38770)), closes [opensearch-project#292](elastic/elastic-charts#292) ### BREAKING CHANGES * **theme:** remove `baseThemeType` prop on `Settings` component and `BaseThemeTypes` type. * `theme.legend.spacingBuffer` added to `Theme` type. Controls the width buffer between the legend label and value.
Summary
This PR add the possibility to customize the number of ticks displayed on each axis.
A
ticksparameter is added to theAxiscomponent. The number specified is not always fully respected as the real number of displayed ticks because the scale function computes ticks that are uniformly spaced with human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the domain (see https://github.com/d3/d3-scale#continuous_ticks)Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.src/index.ts(and stories only import from../srcexcept for test data & storybook)