How to override css and show the values on top of bar charts

[sunnybogawat]

I am using bar charts in my react component and I want to reduce the label font size displaying to x axis. is there any way so I get some handle in the component to do so? also How I can show the values on top of bar charts?

[codesuki]

It should be possible to use the orientation of the axis. (seems to be missing in the readme >_< )

<BarChart
                    data={data}
                    ...
                    xAxis={{orientation: "top"}
/>

Here are all others: https://github.com/codesuki/react-d3-components/blob/master/src/Axis.jsx#L6-L19

You can set the className prop or use the default which is axis and use that in your CSS to style the axis.

Did that help?

[sunnybogawat]

Thanks for the reply. I have tried the same however it's not working. I am rendering the bar chart in a following way using react-d3 pckage

<BarChart data={this.state.data} width={250 } xAxis={{orientation: "top"} height={100} margin={{top: 10, bottom: 50, left: 50, right: 10}}/>

Thanks Sunny

Thanks & Regards

Sunny Bogawat

On Fri, Aug 4, 2017 at 5:47 AM, Neri Marschik <notifications@github.com>
wrote:

> It should be possible to use the orientation of the axis.
> (seems to be missing in the readme >_< )
>
> <BarChart
>                     data={data}
>                     ...
>                     xAxis={{orientation: "top"}
>
> Here are all others:
> https://github.com/codesuki/react-d3-components/blob/
> master/src/Axis.jsx#L6-L19
>
> You can set the className prop or use the default which is axis and use
> that in your CSS to style the axis.
>
> Did that help?
>
> —
> You are receiving this because you authored the thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/codesuki/react-d3-components/issues/135#issuecomment-320123295>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AAPScznUkXWHbuCjvASoyjMONmUBkd1Oks5sUmMggaJpZM4OpzGi>
> .
>

[codesuki]

You probably have to increase the top margin or else the axis will not be visible.