How to define how tickLines are rendered?

[marcus-grant]

I've been searching all the documentation and issues and can't find anything that specifies how to customize tick lines, as opposed to tick values or scaling or labelling. The only solution I've come up with is to take the classNames you've given tick-line and specifying a style class for that. Is there any way to pass jsx or at the very least to pass your own class name to each tick line for each orientation?

[emeeks]

You can style by class, which is traditionally the way to style axes but yes, in keeping with the many new undocumented features, an axis object accepts a tickLineGenerator that takes a function which returns SVG JSX for your tick. For example ,in XYFrame you could pass:

axes={[
            {
              orient: "left",
              tickLineGenerator: ({ xy }) => (
                <path
                  style={{ fill: "lightgrey", strokeDasharray: "5 5", stroke: "grey" }}
                  d={`M${xy.x1},${xy.y1 - 5}L${xy.x2},${xy.y1 - 5}L${
                    xy.x2
                  },${xy.y1 + 5}L${xy.x1},${xy.y1 + 5}Z`}
                />
              )
            },
            {
              orient: "bottom",
              tickLineGenerator: ({ xy }) => (
                <path
                  style={{ fill: "lightgrey", strokeDasharray: "5 5", stroke: "grey" }}
                  d={`M${xy.x1 - 5},${xy.y1}L${xy.x1 - 5},${xy.y2}L${xy.x1 +
                    5},${xy.y2}L${xy.x1 + 5},${xy.y1}Z`}
                />
              )
            }
          ]}

And produce these... things:

If you have any issues let me know. And yes, I'm in the middle of a big doc rewrite so hopefully it will be a better experience in the future. The current docs for <Axis> itself have an example, too:

https://emeeks.github.io/semiotic/#/semiotic/axis

[marcus-grant]

Ok thank you for the detailed response, I'll get back to you when I've tried it out

[dgwyer]

Hi Marcus, I'd be interested in seeing some examples of what you come up with. i.e. how you're looking to customize tick lines.

[bengarvey]

I've been doing it like marcus (with css) and usually end up doing something like this:

axes={[{className: 'slopeTick', orient: 'left', tickFormat: d => d, ticks: 10}]}

And then in css:

.slopeTick .tick-line {
  opacity: 0;
}

[bengarvey]

What I would love is the ability to set className to a function rather than a string, but that might be a deeper react issue. I'm trying to do conditional colors for tick labels and haven't figured out a solution for XYFrame yet. It isn't too hard with the ORFrame.

[dgwyer]

Hi Ben. You can target singular tick labels, or a range of tick labels, directly via CSS using selectors such as nth-child(n) to produce effects like this.

But this assumes you know the tick values and the style(s) you want to apply ahead of time. I'm assuming you want to be able to set a CSS class per tick value because you want to decide in code (dependent on the data etc.) how to exactly style tick values?

Have you any images, mockups, or examples done in other frameworks that show the sort of thing you're trying to achieve? And what is your criteria for conditionally coloring tick labels?

[bengarvey]

@dgwyer yeah, I want to do it conditionally on the data. I'll make another issue about it instead of hijacking this one :)

[marcus-grant]

It's for a work project and a higher priority has come up, but I will definitely get to this within a week and document this when I do. And as for my current solution, it is as @bengarvey has said. I just went on my browser's development tools looked at what CSS classNames were given to the svg paths representing the ticklines, they are called tick-lines, I then went and created my own CSS (SASS actually) class called ticklines where I set the stroke property using the rgba(r,g,b,a) function which allows setting an alpha (transparency/opacity) of the stroke to 0, thus making it transparent and not visible as a tick line anymore. For our project we need the gridlines to either be much more subtle or completely transparent, and potentially only have one dimension of ticklines visible. So for now I'm just making them all invisible.

.tick-line {           
  stroke: rgba(0,0,0,0);                                
}

[dgwyer]

You can use tickSize: 0 to remove tick lines (currently undocumented).

See this pen for an example of specifying several instances of axes to render multiple tick lines of specific sizes.

It works pretty well: https://codepen.io/dgwyer/pen/06ca097f595e2de6d23ac4294f2d4483

[bengarvey]

@dgwyer Good find! Now all we have to do is add it to the wiki and it will become documented :)

[emeeks]

There's an example of using tickSize in the interactive examples, too: https://emeeks.github.io/semiotic/#/semiotic/axis

I seriously need to get the docs in order, guys.

[niwsa]

Hi everyone just found this thread useful, I was struggling to find out a solution and tickSize 0 helped..Just wanted to say thanks :) I guess way to think is that all properties of d3-axis applies as documented in xyframe#axes-array-