yl-endress opened a new issue, #19905:
URL: https://github.com/apache/echarts/issues/19905

   ### 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:
   
![image](https://github.com/apache/echarts/assets/44203645/7186b2f5-ff9f-4217-aa21-70779152b4c5)
   
   With our current approach, we are able to achieve only some parts that the 
customer liked to have:
   
![image](https://github.com/apache/echarts/assets/44203645/5bceae34-6268-4cc2-9a20-3703e8386db7)
   
   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
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to