[Feature] Make axisLabels and nameTextStyle more flexible

[yl-endress]

What problem does this feature solve?

Hello everyone,

thanks for the nice charts library. Unfortunately, we cannot fulfill some requests of our customer with the current library version:

• The "nameTextStyle" of the graphs should overlay the axisLabel and the axisTick
• The "nameTextStyle" of the graph should be aligned to the top and rotated by 90°
• It should be possible to stack multiple segments at the same axis

Here comes a sample which shows a sample of the customers idea:

With our current approach, we are able to achieve only some parts that the customer liked to have:

Here comes some modified code, which contains our current approach:

const result = 
{
      name: segment.name + (segment.unitName ?  (" " + segment.unitName) : ""),
      type: "value",
      nameLocation: "middle",
      nameGap: 30,
      // the following style cannot be used, as there is now way to get an offset from nameTextStyle to the axisLabel
      // nameRotate: 90,
      // nameLocation: "end",
      // nameGap: 30
      nameTextStyle: {
        ...buildMyFontOption(),
         borderWidth: this.MY_BORDER_WIDTH,
        borderType: "solid",
        borderColor: segment.color,
        color: segment.color,
        borderRadius: this.BORDER_RADIUS,
        backgroundColor: this.BACKGROUND_COLOR,
        padding: 5
      },
      offset: segment.offset,
      alignTicks: true,
      axisLabel: {
        show: true,
        backgroundColor: this.BACKGROUND_COLOR,
        padding: [0, 5, 0, 5],
        inside: false,
        opacity: 0.9,
        ...buildMyFontOption()
      },
      axisLine: {
        show: false
      },
      axisTick: {
          show: true,
          length: this.REQUIRED_SPACE_PER_Y_AXIS,
          inside: true,
          lineStyle: {
            type: "solid",
            color: this.MY_AXIS_TICK_COLOR,
            width: 1,
          }
        }
    };

What does the proposed API look like?

To resolve following issue, I suggest something like

• The "nameTextStyle" of the graphs should overlay the axisLabel and the axisTick
  • introduce zIndex for nameTextStyle, axisLabel and axisTick

  •  ...,
     nameTextStyle: {
       ...,
       zIndex: 2 // default should be 0 to avoid breaking changes
     },
     axisLabel: {
       ...,
       zIndex: 1 // default should be 2 to avoid breaking changes
     },
     axisTick: {
        ...,
        zIndex: 0 // default should be 1 to avoid breaking changes
     }
    

  };```
• The "nameTextStyle" of the graph should be aligned to the top and rotated by 90°
  • nameLocationMiddleAlignment: "middle" | "start" | "end" = "middle" [default is middle, as it is now]
• It should be possible to stack multiple segments at the same axis
  • I have no idea how to achieve this. Maybe its already working and I just didn't find a way how to do this

[helgasoft]

☑ "nameTextStyle" of the graphs should overlay the axisLabel and the axisTick
☑ The "nameTextStyle" of the graph should be aligned to the top and rotated by 90°
☑ It should be possible to stack multiple segments at the same axis
Demo - of course you need to adjust nameGap, lineHeight and offset for all axes.
And give up the border because of lineHeight.

[yl-endress]

Thank you @helgasoft for your solution idea. Unfortunately, the border is mandatory and must be displayed. Also the line of the axisTick would still overwrite the label.