How to configure tooltip and legend shape as rectangles with rounded corners

Title

How to configure Legend Shape as a rectangle with rounded corners?

Description

As shown below:

Solution

Support configuration as’rectRound ‘type

Tooltip: shapeType:”rectRound”

tooltip: {
mark: {


This content originally appeared on DEV Community and was authored by SimaQ

Title

How to configure Legend Shape as a rectangle with rounded corners?

Description

As shown below:

Image description

Solution

Support configuration as'rectRound 'type

  1. Tooltip: shapeType:"rectRound"
tooltip: {
    mark: {
      content: [
        {
          shapeType: 'rectRound',
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
  1. Legend:
legends: {
    visible: true,
    orient: 'right',

    item: {
      width: '15%',
      shape: {
        style: {
          symbolType: 'rectRound'
        }
      }
    }
  },

Code Example


const spec = {
  type: 'pie',
  data: [
    {
      id: 'pie',
      values: [
  { value: 10, category: 'One' },
  { value: 9, category: 'Two' },
  { value: 6, category: 'Three' },
  { value: 5, category: 'Four' },
  { value: 4, category: 'Five' },
  { value: 3, category: 'Six' },
  { value: 1, category: 'Seven' }
]
    }
  ],
  categoryField: 'category',
  valueField: 'value',
  legends: {
    visible: true,
    orient: 'right',

    item: {
      width: '15%',
      shape: {
        style: {
          symbolType: 'rectRound'
        }
      }
    }
  },
  tooltip: {
    mark: {
      content: [
        {
          shapeType: 'rectRound',
          key: datum => datum['type'],
          value: datum => datum['value'] + '%'
        }
      ]
    }
  }
};

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

vchart.renderSync();

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

Result

Image description

Related Documents


This content originally appeared on DEV Community and was authored by SimaQ


Print Share Comment Cite Upload Translate Updates
APA

SimaQ | Sciencx (2024-06-26T07:22:03+00:00) How to configure tooltip and legend shape as rectangles with rounded corners. Retrieved from https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/

MLA
" » How to configure tooltip and legend shape as rectangles with rounded corners." SimaQ | Sciencx - Wednesday June 26, 2024, https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/
HARVARD
SimaQ | Sciencx Wednesday June 26, 2024 » How to configure tooltip and legend shape as rectangles with rounded corners., viewed ,<https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/>
VANCOUVER
SimaQ | Sciencx - » How to configure tooltip and legend shape as rectangles with rounded corners. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/
CHICAGO
" » How to configure tooltip and legend shape as rectangles with rounded corners." SimaQ | Sciencx - Accessed . https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/
IEEE
" » How to configure tooltip and legend shape as rectangles with rounded corners." SimaQ | Sciencx [Online]. Available: https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/. [Accessed: ]
rf:citation
» How to configure tooltip and legend shape as rectangles with rounded corners | SimaQ | Sciencx | https://www.scien.cx/2024/06/26/how-to-configure-tooltip-and-legend-shape-as-rectangles-with-rounded-corners/ |

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.