How to move axis label to the middle of the axis?

[topvis]

The default position of the axis label is at the end of the axis as shown in the screenshot. Is there anyway to set the label to be in a different position, e.g., at where the arrows point to?

Another question about the axis labels... how to change style (font, size etc.) of the axis labels? I tried search the documentation here but couldn't find how to do it.

[mcnuttandrew]

That functionality doesn't really exist right now! It certainly can and should be part of the Annotation as first class citizens (#494), but i think you could probably get something working today by adding some custom SVG like so:

import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';

class CustomAxisLabel extends PureComponent {
  render() {
    return (
      <g transform={`translate(${width / 2}, ${height / 2}`}> <text>LABEL NAME </label></g>
    );
  }
}

CustomAxisLabel.displayName = 'CustomAxisLabel';
CustomAxisLabel.requiresSVG = true;
export default CustomAxisLabel;

Then embed that into XYPlot as child, like so:

<XYPlot>
<XAxis />
<LineSeries />
<CustomAxisLabel />
</XYPlot>

(There may so typos in there, i didn't run this code)

[topvis]

@mcnuttandrew thanks for the solution. I can try the workaround.
I think it would be easier if once can do something like:

<XAxis title="X Axis Title" titlePosition="middle-under" style={{
  title: {fontSize: '16px}
}}...

titlePosition can be selected from the pre-defined positions.
the style of the title can be set in style property.
just my two cents.

[mcnuttandrew]

I totally agree and would welcome a PR to that effect! Maybe a more robust api would be like

<XAxis title="X Axis Title" titlePositionX="50%" titlePositionY="-15px" style={{
  title: {fontSize: '16px}
}}/>

or something to that effect so that we dont support a bunch of individual keywords?

[brandonmp]

for those seeking a for-now solution, here's what I came up w/

const CustomAxisLabel = (props/*: {
    title: string,
    xAxis: boolean,
    // note these next two are passed down from the parent XYPlot/Flexible*XYPlot
    innerWidth: number,
    innerHeight: number
}*/) => {
    // since we rotate the y label, we have to adjust it to center
   // (ideally we'd rotate about the correct origin, but i couldn't get that working)
    const yLabelOffset = {
        y: props.innerHeight / 2 + props.title.length * 3, // '3' might be different for you depending on your font size/char width
        x: 10
    };

    const xLabelOffset = {
        x: props.innerWidth / 2,
        y: 1.2 * props.innerHeight // 1.2 was enough for me to get it below x axis. you may need a diff't #
    };
    const transform = props.xAxis
        ? `translate(${xLabelOffset.x}, ${xLabelOffset.y})` 
        : `translate(${yLabelOffset.x}, ${yLabelOffset.y}) rotate(-90)`;
         
    return (
        <g
            transform={transform}
        >
            <text>{props.title}</text>
        </g>
    );
};

CustomAxisLabel.displayName = 'CustomAxisLabel';
CustomAxisLabel.requiresSVG = true;



<CustomAxisLabel title={'This is my Y Axis'}/>
<CustomAxisLabel title={'This is my X Axis'} xAxis />

which looks like

[davegravy]

@brandonmp I'm using your "for now" code but running up against crummy looking rotated text in Chrome especially.

See: https://stackoverflow.com/questions/50257924/svg-transform-text-aliased-in-chrome-how-can-i-fix-it

Any ideas?

[gopaltirupur]

How to change the text color on this ?

[mcnuttandrew]

There's a solution now available in ChartLabel (see #1038 for more details)

[vtarelkin]

Is it only me who cannot find the info - but here is EXACT link how to make this possible
dd0ff5e