Styling ticks to fix offset and overlap

[aishmit]

Styling ticks to fix offset and overlap

[aishmit]

Also is there any proper documentation for nameLabelFormat? I feel like this may be a viable solution however all I can find is that nameLabelFormat accepts a string[]

[Golodhros]

Hi @aishmitk, thanks for creating this issue!

I see the y-axis offset, it feels weird. I would tweak it with CSS as you mention. If you post it as a Codepen I could help you more (You can jumpstart it from this one).

Regarding the x-ticks, you could try to specify a number with xTicks (http://eventbrite.github.io/britecharts/module-Stacked-bar.html#.xTicks__anchor). You could also try to tilt the values with CSS.

Oops, it seems there is an issue with nameLabelFormat, as it is not being used at the moment. I will create an issue to investigate further.

Thanks!

[davegomez]

The problem with the xTicks prop is that as it is explained in the D3 docs is a mere suggestion and in most cases doesn't have any real effect on the number of ticks displayed, specially with high number of datasets.

The specified count is only a hint; the scale may return more or fewer values depending on the domain.

Source: D3 scale.ticks

[jjphung]

This is probably a really elementary question. But how do you apply CSS to the graph? The graph is rendered to a SVG element. I am trying to left align axis tick labels (more specifically x-axis on horizontal bar graph)

I see the y-axis offset, it feels weird. I would tweak it with CSS as you mention. If you post it as a Codepen I could help you more (You can jumpstart it from this one).

Regarding the x-ticks, you could try to specify a number with xTicks (http://eventbrite.github.io/britecharts/module-Stacked-bar.html#.xTicks__anchor). You could also try to tilt the values with CSS.

[Golodhros]

Hi @jjphung, sorry for the delay!

In order to apply that CSS styling, you would do something like this:

.x.axis .tick .text {
    transform: rotate(-45deg);
}

And probably adjust the x axis position:

.x.axis {
    transform: translateY(420px);
}

(Assuming the original translation was 400px, that could be different in your case)

[jjphung]

@Golodhros Thank you so much! I was trying to apply CSS properties through stuff like: "text-align: left". I didn't notice the text transform properties being applied to the classes. Adjusting the text transform and text-anchor properties did the trick!

And probably adjust the x axis position:

.x.axis {
    transform: translateY(420px);
}

(Assuming the original translation was 400px, that could be different in your case)

[Golodhros]

Closing due to lack of activity.