DEV Community

FlyingAndFly
FlyingAndFly

Posted on

How to customize radar chart axis labels to richtext in VChart?

Description

Expect to support custom icons and different text styles in labels, similar to:
Image description

Solution

First, let's analyze the requirements. The label of the angle axis in polar coordinates is shown in the figure.

  1. Add shaft configuration
    In VChart, you can configure the axis through the axes property. axes receives an array, adds an item, and sets the axis type of axes [0].type: 'angle' to angle axis;

  2. Configuration axis label
    Configure axes[0].label to rich text by formatting function formatMethod.
    formatMethod returns a configuration object with rich text content

    1. type: 'rich' : defines the return text type as rich text
    2. text : Detailed configuration of rich text. Supports two types of text and image. Detailed configuration can refer to the configuration item document.
formatMethod: (value, data, c, d) => {
  return {
    type: "rich",
    text: [
      {
        image:
          '<svg t="1714116158819" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19433" width="200" height="200"><path d="M1152 76.8v870.4h-1075.2v-870.4h1075.2M1228.8 0H0v1024h1228.8V0z" fill="#0686E5" p-id="19434"></path><path d="M0 0h1228.8v1024H0z" fill="#0686E5" p-id="19435"></path></svg>',
        width: 2,
        height: 10,
      },
      {
        text: ` ${value} `,
        fontSize: 16,
        fill: "black",
        fontWeight: "bold",
      },
      {
        text: ` ${values.find((v) => v.key === value)?.value} `,
        fontSize: 16,
        fill: "rgb(22,100,255)",
        fontWeight: "bold",
      },
    ],
  };
},
Enter fullscreen mode Exit fullscreen mode

Image description

Code Example

You can copy the code below and paste in the editor to see the demo

const values = [
        {
          key: 'Strength',
          value: 5
        },
        {
          key: 'Speed',
          value: 5
        },
        {
          key: 'Shooting',
          value: 3
        },
        {
          key: 'Endurance',
          value: 5
        },
        {
          key: 'Precision',
          value: 5
        },
        {
          key: 'Growth',
          value: 5
        }
      ];

const spec = {
  type: 'radar',
  data: [
    {
      id: 'radarData',
      values
    }
  ],
  categoryField: 'key',
  valueField: 'value',
  point: {
    visible: false // disable point
  },
  area: {
    visible: true, // display area
    state: {
      // The style in the hover state of the area
      hover: {
        fillOpacity: 0.5
      }
    }
  },
  line: {
    style: {
      lineWidth: 4
    }
  },
  axes: [
    {
      orient: 'radius', // radius axis
      zIndex: 100,
      min: 0,
      max: 8,
      domainLine: {
        visible: false
      },
      label: {
        visible: true,
        space: 0,
        style: {
          textAlign: 'center',
          stroke: '#fff',
          lineWidth: 4
        }
      },
      grid: {
        smooth: false,
        style: {
          lineDash: [0]
        }
      }
    },
    {
      orient: 'angle', // angle axis
      zIndex: 50,
      tick: {
        visible: false
      },
      domainLine: {
        visible: false
      },
      label: {
        space: 20,
         formatMethod: (value, data,c,d) => {
          console.log(value,data,c,d)
      return {
        type: 'rich',
        text: [
          {
            image: '<svg t="1714116158819" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19433" width="200" height="200"><path d="M1152 76.8v870.4h-1075.2v-870.4h1075.2M1228.8 0H0v1024h1228.8V0z" fill="#0686E5" p-id="19434"></path><path d="M0 0h1228.8v1024H0z" fill="#0686E5" p-id="19435"></path></svg>',
            width: 2,
            height: 10
          },
          {
            text: ` ${value} `,
            fontSize: 16,
            fill: 'black',
            fontWeight: 'bold'
          },
           {
            text: ` ${values.find(v => v.key === value)?.value} `,
            fontSize: 16,
            fill: 'rgb(22,100,255)',
            fontWeight: 'bold'
          }
        ]
      };
    }
      },
      grid: {
        style: {
          lineDash: [0]
        }
      }
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Enter fullscreen mode Exit fullscreen mode

Related Documentation

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay