Nivo: Feature (or example) request: Ability to define the number of ticks on bar chart axis

[mario589736]

Example:
I have a range of values from 0% - 100%. Now i want to show only a tick on
25%, 50%, and 100% or just less than four on the axis. Enough would probably a attribute like e.g. "max ticks". Is that / or will that be possible in the future?

[plouc]

Feature available in [email protected], you can use:

• tickValues, for your use case tickValues: [25, 50, 100]
• or tickCount specifying desired number of ticks (note that I've kept d3 behavior, so 1, means you'll end up with 2 ticks, first one not being counted)

[plouc]

I had exactly the same need, don't know if you used this, but you should also set maxValue={100} with percent based values.

[mario589736]

thanks for your fast reply! i updated and tried it, but both are not working in my case:

axisLeft = this.props.axisLeft || {
                orient: 'left',
                tickSize: 5,
                tickPadding: 5,
                tickRotation: 0,
                legend: 'Männlich/Weiblich in %',
                legendPosition: 'center',
                legendOffset: -40,
                tickValues: [25, 50, 100]
            };`

 <Bar
                        width={this.props.width}
                        height={this.props.height}
                        data={data}
                        keys={[keySchema.key1, keySchema.key2]}
                        indexBy={indexBy}
                        margin={margin}
                        minValue="auto"
                        innerPadding={4}
                        padding={padding}
                        groupMode={groupMode}
                        layout={layout}
                        colors={colors}
                        colorBy="id"
                        axisBottom={axisBottom}
                        axisLeft={axisLeft}
                        enableGridX={false}
                        enableGridY={enableGridY}
                        enableLabel={enableLabel}
                        labelTextColor="#FFF"
                        labelsLinkColor="inherit"
                        animate={true}
                        motionStiffness={90}
                        motionDamping={15}
                        isInteractive={true}
                        maxValue={100}
                    />

any idea?

[plouc]

I had several problems while publishing a new release of nivo on npm (missing files, stale code), really annoying, I'll have to find out what's happening, maybe some kind of cache somewhere…
I've published [email protected], you can see a working example here.

[mario589736]

Thanks! :), after upgrading to [email protected] it works perfectly.

[azyth]

Hi there I am using "@nivo/line": "^0.52.0" and i can get "tickValues" to work with my graph to reduce the number of y axis ticks(default has >10).
I have discovered I can define "tickValues": [0,100, 200, 300, 400, 500], and it will only display values up to my max data points however i would prefer to have a set number of y ticks. whenever I try to use "tickCount" such as "tickCount": 2, it goes back to the default and not the expected 3 ticks.

EDIT: i see in ISSUE #66 that you say you have removed support for "tickCount" is this true and are you planning on an alternative or only sticking with "tickValues"?

thanks

[BrunoQuaresma]

tickCount didn't work for me.