Home > database >  How to hide ticklabel in d3 with typescript
How to hide ticklabel in d3 with typescript

Time:10-14

I know that to hide the tick labels just pass an empty string to the .tickFormat ("") method. This works fine with Javascript, but not with Typescript as it returns the following error:

TS2769: No overload matches this call.
  Overload 1 of 3, '(format: null): Axis<NumberValue>', gave the following error.
    Argument of type '""' is not assignable to parameter of type 'null'.
  Overload 2 of 3, '(format: (domainValue: NumberValue, index: number) => string): Axis<NumberValue>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '(domainValue: NumberValue, index: number) => string'.
  > 100 |   const Xaxis = d3.axisTop(Xscale).tickFormat("");

The tickFormat method wants to:

tickFormat(format: (domainValue: Domain, index: number) => string): this;

    /**
     * Reset the tick format function. A null format indicates that the scale’s
     * default formatter should be used, which is generated by calling scale.tickFormat.
     * In this case, the arguments specified by axis.tickArguments
     * are likewise passed to scale.tickFormat.
     *
     * @param format null
     */
    tickFormat(format: null): this;

How can I solve the problem by passing the empty string and hiding the labels?

CodePudding user response:

The error tells you the solution:

Overload 2 of 3, '(format: (domainValue: NumberValue, index: number) => string): Axis<NumberValue>', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '(domainValue: NumberValue, index: number) => string'.

You should provide a function, that returns a string:

axis.tickFormat(() => '');
  • Related