How to style (fontstyle, fontweight those things) the text of x axis and y axis for xName.

[ND]

In seriesDirective I was rendering xName = "resources_name", I need to style it. using react hooks

<ChartComponent

id="charts"

style={{ width: "inherit", height: "inherit" }}

primaryXAxis={{ valueType: "Category", labelIntersectAction: "Rotate45" }}

primaryYAxis={{

minimum: 0,

maximum: 30,

interval: 5,

// title: title,

labelIntersectAction: "Rotate45",

labelFormat: `{value}h`,

// minorGridLines: {

// color: "#D1D2D4",

// width: 0,

// },

titleStyle: {

fontFamily: PRIMARY_TEXT_FONT,

color: "#D1D2D4",

fontWeight: "normal",

},

}}

legendSettings={{

visible: true,

position: "Top",

alignment: "Far",

}}

>

<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />

<SeriesCollectionDirective>

<SeriesDirective

dataSource={chartData}

xName="resource_name"

type="Column"

yName="10h"

name="manpower"

legendShape="Rectangle"

/>

</SeriesCollectionDirective>

</ChartComponent>

[Srihari Muthukaruppan]

Hi ND, 

 

Based on the provided details we suspect that your requirement is to customize the xAxis Labels. Based on that, we can achieve your requirement using labelStyle property in the axis of the chart. We have also prepared a sample for your reference. Please find the sample, code snippet and screenshot below. 

 

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

 

Code Snippet: 

// add your additional code here 

 

<ChartComponent 

            id="charts" 

            style={{ width: 'inherit', height: 'inherit' }} 

            primaryXAxis={{ 

              valueType: 'Category', 

              labelIntersectAction: 'Rotate45', 

              labelStyle: { 

                fontStyle: 'Italic', 

                fontWeight: 'Bold', 

                fontFamily: 'TimesNewRoman', 

                size: '15px', 

                color: 'Blue' 

              } 

            }} 

// add your additional code here 

 

Screenshot: 

 

 

If still this is not your exact requirement kindly share more details regarding the requirement which will be helpful for further analysis and provide you solution sooner. 

 

Regards, 

Srihari M 

[ND]

Why does labelIntersectAction: 'Rotate45',  not working for text it should rotate to 45 degree but its not working

[Srihari Muthukaruppan]

Hi ND, 

 

Based on your requirement. We would like to let you know that labelIntersectAction occurs only when both labels intersect with each other. If you need to rotate axis label by default we suggest you to use labelRotation property in the chart to achieve your requirement. Please find the sample, code snippet and screenshot for your reference.  

 

Sample: https://stackblitz.com/edit/react-jgdvjv-wj3pb8?file=index.js 

 

Code Snippet: 

// add your additional code here 

 

primaryXAxis={{ 

              valueType: 'Category', 

              labelRotation: 45, 

              labelStyle: { 

                fontStyle: 'Italic', 

                fontWeight: 'Bold', 

                fontFamily: 'TimesNewRoman', 

                size: '15px', 

                color: 'Blue' 

              } 

}} 

 

// add your additional code here 

 

 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M