How to use Reactjs JSX based HTML in apex charts (bar) x axis label instead of simple string

Question

I am using a bar chart from apexcharts in a reactjs application. I have rich text and I want to show it as the x-axis label of that chart instead of a regular string. Is there a way to do this? I want to keep the text formatting and styles.

Answer 1

There is style option for xaxis in ApexChart. You can find more in the docs.

Example:

const option = {
    xaxis: {
        labels: {
            style: {
                fontSize: '12px',
                fontFamily: 'Helvetica, Arial, sans-serif',
                fontWeight: 400,
                cssClass: 'some_labels',
            }
        }
    }
}