Display axis label above, not beside, y axis

[hyewon kim]

Hi! I'm wondering how to display axis label above, not beside, an axis.

In the image below, I know the left case can be achieved with title property of AxisModel. But what I'm trying to make is the case on the right and I can't find how.

I'd appreciate if you could guide me how.

Thanks in advance.

[Gopalakrishnan Veeraraghavan]

Hi hyewon kim,

We can achieve placing the axis title at the top of the axis by using annotations in ChartModel. Please refer to the code snippet below. Additionally, we have created a sample for your reference.

[index.js]

   <AnnotationsDirective>

            <AnnotationDirective

              content={content}

              x="3%"

              y="3%">

            </AnnotationDirective>

  </AnnotationsDirective>

 

Sample: https://stackblitz.com/edit/react-umg4o8-2rq7hq?file=index.js

We hope this information helps you in resolving your concern. If you have any further queries or require further assistance, please let us know.

Regards,

Gopalakrishnan Veeraraghavan

[hyewon kim]

Hi, Gopalakrishnan.

Thanks for the answer. However I find this solution limited to certain cases for reasons below.

1. A chart may not have a title. This solution sets title to make space on top of an axis but what if the chart doesn't have a title? Is there any way to add padding to a chart within the svg but outside of AxisInsideCollection?
2. The x position of an axis isn't always fixed. I have a Bar chart with where the xName of its series is some sort of names. The x position is decided depending on the length of the names so I can't place the annotation at the right place using an arbitrary value like 3%. Also considering that a chart can be responsive, the axis label may be placed at a wrong position depending on the viewport size. I think the axis label should be placed relatively to the axis and wonder if there's a way to achieve this.

I'm looking forward to hearing from you soon. 

Thanks in advance.

Regards,

Hyewon

[Nishanthi Panner Selvam]

Hyewon,

Query1: A chart may not have a title. This solution sets title to make space on top of an axis but what if the chart doesn't have a title? Is there any way to add padding to a chart within the svg but outside of AxisInsideCollection?

After analyzing your query, we recommend adding a top margin in chart. This will ensure that there is sufficient space at the top, even if the chart doesn't have a title.

We have attached sample, screenshot and code-snippet for your reference.

Code-snippet:

<ChartComponent id="charts"

                                style={{ textAlign: 'center' }}

                                margin={{ top : 30 }}

</ChartComponent>

Screenshot:

Sample: https://stackblitz.com/edit/react-umg4o8-zwfnya?file=index.js

Query2: The x position of an axis isn't always fixed.

As of now manually adjusting the annotation x and y values based on the axis position is the only possible option.

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[hyewon kim]

Hi, Nishanthi.

Thanks for the answer. It helped. 

I have a further question. Consider a case where a chart has a legend positioned at top-left. 

Since the legend is contained within ChartComponent, ChartComponent's margin-top is applied above the legend, not between the legend and the chart. How can I place the Y axis label at the right place in this case? I know you can set margin to legend container, but then you have to find the arbitrary y position for the label to be located at the right place. I'm hoping there's a better way than this. 

This is the sample of the case described above: https://stackblitz.com/edit/react-umg4o8-arefhh?file=index.js

Thanks in advance.

Regards,

Hyewon

[Nishanthi Panner Selvam]

Hyewon,

We have analyzed your query based on that we suggest you to use padding for the legend, which allows you to apply spacing around the legend items. After implementing this padding, you can adjust the annotation position to place it above the Y-axis label.

Code-snippet:

< ChartComponent

            legendSettings ={

                {

             enableHighlight: false,

            visible: true,

            position: 'Top',

            alignment: 'Near',

            padding: 37

          }

        >

       </ ChartComponent >

Screenshot:

Sample: https://stackblitz.com/edit/react-umg4o8-trtute?file=index.js

Kindly revert us if you have any concerns.

Regards,

Nishanthi