How change LabelFormat value at y axis in syncfusion charts? - reactjs

Question

I make a chart with React and syncfusion but I dont'know what is the best way to change the y axis values. I solve so I search the id and mannualy write the DOM in useEffect.
But what is the best way I change y axis values in syncfusion charts?
import React, { useEffect } from "react";
import { skillsIcon } from "../data/dummy";
import { GoPrimitiveDot } from "react-icons/go";
import { Stacked, Pie, Button, SparkLine,BackendStacked } from "../components";
import {
earningData,
SparklineAreaData,
ecomPieChartData,
} from "../data/dummy";
import { useStateContext } from "../contexts/ContextProvider";
const Skills = () => {
const {
screenSize,
setScreenSize,
} = useStateContext();
useEffect(() => {
document.getElementById("charts1_AxisLabel_4").innerHTML = "Medior"
document.getElementById("charts1_AxisLabel_3").innerHTML = ""
document.getElementById("charts1_AxisLabel_2").innerHTML = "Junior"
document.getElementById("charts1_AxisLabel_1").innerHTML = ""
document.getElementById("charts1_AxisLabel_0").innerHTML = "Entry"
}, [screenSize,setScreenSize]);
return (
<div>
<h1 className="text-center text-4xl my-10 font-bold">Skills</h1>
<div className="flex m-3 flex-wrap justify-center gap-1 items-center">
{skillsIcon.map((skill) => (
<div
key={skill.title}
className="bg-white dark:text-gray-200 dark:bg-secondary-dark-bg md:w-40
p-4 pt-9 rounded-2xl"
>
<button
type="button"
style={{ color: skill.iconColor, backgroundColor: skill.iconBg }}
className="text-2xl opacity-0.9 rounded-full p-4 hover:drop-shadow-xl"
>
{skill.icon}
</button>
<p className="mt-3">
<span className="text-lg font-semibold">{skill.title}</span>
<span className={`text-sm text-${skill.pcColor} ml-2`}>
{skill.percentage}
</span>
</p>
</div>
))}
</div>
<div className="flex gap-10 flex-wrap justify-center">
<div
className="bg-white dark:text-gray-200
dark:bg-secondary-dark-bg m-3 p-4 rounded-2xl md:w-780"
>
<div className="">
<h2 className="font-semibold text-center text-xl ">
Skills - graph
</h2>
</div>
<div className="mt-10 flex gap-10 flex-wrap justify-center">
<div>
<Stacked height="420px" width="580px" />
</div>
<div>
<BackendStacked height="420px" width="580px" />
</div>
</div>
</div>
</div>
</div>
);
};
export default Skills;

Answer 1

This requirement can be achieved using the chart axisLabelRender event. Please review the code snippet and sample link shared below, which changes axis labels using an event.
export let ylabels = ["Zero", "Twenty", "Fourty", "Sixty","Eighty", "Hundred"];
export let i = 0;
<ChartComponent id='charts' axisLabelRender={this.onAxisLabelRender.bind(this)}>
</ChartComponent>
onAxisLabelRender(args){
if (args.axis.name == "primaryYAxis") {
if(ylabels.length == i)
i =0;
args.text = ylabels[i]+" %";
i++;
}
}
Sample : https://stackblitz.com/edit/react-w6o5wf
Here’a some more relevant information from our Documentation to learn more about the axisLabelRender event.
https://ej2.syncfusion.com/react/documentation/chart/axis-labels/#customizing-specific-point
Please let us know if you have any more questions.