Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🤔 [QUESTION] Unable to customize the label of X axis. (Radar Chart) #3795

Open
IlIIIIIIlI opened this issue Jul 5, 2024 · 2 comments
Open
Labels
Question Further information is requested

Comments

@IlIIIIIIlI
Copy link

🐛 Question description

I want to add a border for the label of X axis in the Radar Chart

💻 Link to minimal reproduction

      xAxis: {
        label: {
          style: {
            fontFamily: "'Inter', sans-serif",
            fontWeight: 500,
            fontSize: 20,
            fill: "#0C0D21",
            border: "1px solid #F1F1F7",
            background: "#6a6a6a",
            className: styles.xAxisLabel,
          },
          formatter: (text, item, index) => {
            const userAScore = data.find(
              (d) => d.item === text && d.user === "User A"
            ).actualScore;
            const userBScore = data.find(
              (d) => d.item === text && d.user === "User B"
            ).actualScore;
            return `${text} (A: ${userAScore}, B: ${userBScore})`;
          },
          useHtml: true,
          htmlTemplate: (text) => `
            <div style="
              background: #FFFFFF;
              border: 1px solid #F1F1F7;
              border-radius: 4px;
              padding: 4px 8px;
            ">${text}</div>
          `,
        },
.xAxisLabel {
  border: 3px solid #000 !important;
  padding: 2px;
  background-color: #fff;
}

🏞 Expected result

I tried add border using HTML or using className to define. but all failed. I checked the doc, but I did not find an example to support this.
if this is achievable?

  • G2Plot Version: "@antv/g2plot": "^2.4.31",
  • Platform: Win11
@IlIIIIIIlI IlIIIIIIlI added the Question Further information is requested label Jul 5, 2024
@IlIIIIIIlI IlIIIIIIlI changed the title 🤔 Unable to customize the label of X axis. (Radar Chart) 🤔 [Question] Unable to customize the label of X axis. (Radar Chart) Jul 5, 2024
@IlIIIIIIlI IlIIIIIIlI changed the title 🤔 [Question] Unable to customize the label of X axis. (Radar Chart) 🤔 [QUESTION] Unable to customize the label of X axis. (Radar Chart) Jul 5, 2024
@deerLoves
Copy link

We also encountered a similar problem, want to increase the two cycle comparison date, x axis hope to support custom components

@IlIIIIIIlI
Copy link
Author

IlIIIIIIlI commented Jul 28, 2024

We also encountered a similar problem, want to increase the two cycle comparison date, x axis hope to support custom components

I used chart.js instead. try it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants