This content originally appeared on DEV Community and was authored by Xuefei Li

How to make the axis label with graphics in VChart?

Question title

How to make axis labels with graphics in VChart?

Problem description

Want to mark the special value label of the x-axis with a graph

Solution

The label of the coordinate axis currently supports the configuration of rich text content.

 label: {
        formatMethod: label => {
          return {
            type: 'rich',
            text: [
              {
                text: `${label}`,
                fontSize: 16,
                fontWeight: 'bold',
                fontStyle: 'italic'
              },
              { image: `icon address`, width: 40, height: 40 },
            ]
          };
        }
      }

Code example

const rankIcon = {
  'Top 1': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/gold-medal.svg',
  'Top 2': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/silver-medal.svg',
  'Top 3': 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/bronze-medal.svg'
};
const spec = {
  type: 'bar',
  height: 300,
  data: [
    {
      id: 'barData',
      values: [
        { name: 'Top 1', value: 990 },
        { name: 'Top 2', value: 680 },
        { name: 'Top 3', value: 255 }
      ]
    }
  ],
  barWidth: 20,
  yField: 'name',
  xField: 'value',
  bar: {
    style: {
      cornerRadius: [0, 10, 10, 0],
      fill: {
        gradient: 'linear',
        x0: 0,
        y0: 0.5,
        x1: 1,
        y1: 0.5,
        stops: [
          { offset: 0, color: 'rgb(255,163,1)' },
          { offset: 1, color: 'rgb(255,4,0)' }
        ]
      }
    }
  },
  barBackground: {
    visible: true
  },
  label: {
    visible: true,
    position: 'center',
    style: {
      fill: 'white',
      stroke: false
    }
  },
  direction: 'horizontal',
  seriesField: 'type',
  padding: { left: 50 },
  axes: [
    {
      orient: 'left',
      minWidth: 50,
      label: {
        formatMethod: label => {
          return {
            type: 'rich',
            text: [
              { image: rankIcon[label], width: 40, height: 40 },
              {
                text: `${label}`,
                fontSize: 16,
                fontWeight: 'bold',
                fontStyle: 'italic'
              }
            ]
          };
        }
      }
    }
  ]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

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

Results show

This content originally appeared on DEV Community and was authored by Xuefei Li

Print Share Comment Cite Upload Translate Updates

APA

Xuefei Li | Sciencx (2024-06-20T08:36:46+00:00) How to make the axis label with graphics in VChart?. Retrieved from https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/

MLA

" » How to make the axis label with graphics in VChart?." Xuefei Li | Sciencx - Thursday June 20, 2024, https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/

HARVARD

Xuefei Li | Sciencx Thursday June 20, 2024 » How to make the axis label with graphics in VChart?., viewed ,<https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/>

VANCOUVER

Xuefei Li | Sciencx - » How to make the axis label with graphics in VChart?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/

CHICAGO

" » How to make the axis label with graphics in VChart?." Xuefei Li | Sciencx - Accessed . https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/

IEEE

" » How to make the axis label with graphics in VChart?." Xuefei Li | Sciencx [Online]. Available: https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/. [Accessed: ]

rf:citation

» How to make the axis label with graphics in VChart? | Xuefei Li | Sciencx | https://www.scien.cx/2024/06/20/how-to-make-the-axis-label-with-graphics-in-vchart/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.