Hi,
How can I rotate the unit label ("value")?
You can rotate the axis label using a transform CSS style eg:
transform: rotate(0deg) translateX(-10px);
Here is an example axis definition:
Example Axes Definition
axes[0]{
"name": "Default",
"position": "left",
"width": 120, --> Modify this depending on the length of the label
"color": "#757A7F",
"dataFormat": "0,0.##",
"range": {
"auto": true,
"min": "",
"max": ""
},
"label": {
"text": "Something Really Long",
"offset": 55, --> Modify this to adjust Y position
"font": {
"color": "#757A7F",
"size": 10
},
"style": {
"classes": "",
"transform": "rotate(0deg) translateX(-10px)" --> Modify the X translate for X Position.
}
},
"tick": {
"color": "#757A7F",
"count": "Auto",
"label": {
"format": "Auto",
"font": {
"color": "#757A7F",
"size": 10
},
"style": {
"classes": ""
}
},
"style": {
"classes": ""
}
},
"grid": {
"visible": false,
"color": "#757A7F",
"opacity": 0.9,
"dashArray": 0,
"style": {
"classes": ""
}
},
"style": {
"classes": ""
}
}
Few things to keep in mind.
- Given the power chart allows users to define the axes you might want to consider putting these style overrides in the advanced style sheet.
Example style sheet override
Note: this override is for a time series chart and not power chart your styles will vary
/* Makes the left axis labels on time series chart appear on top */
#simpleTrendRealtime text.ia_timeSeriesChartComponent__yAxis__label[y="-50"],
#simpleTrendHistorical text.ia_timeSeriesChartComponent__yAxis__label[y="-50"] {
transform: rotate(0deg) translateY(35px);
text-anchor: end;
}
/* Makes the right axis labels on time series chart appear on top */
#simpleTrendRealtime text.ia_timeSeriesChartComponent__yAxis__label[y="40"],
#simpleTrendHistorical text.ia_timeSeriesChartComponent__yAxis__label[y="40"] {
transform: rotate(0deg) translateY(-55px);
text-anchor: start;
}
Hopefully, this gives you a starting point to work from.
Thank You, but the label is disappearing no matter what value of translateX I use
