DEV Community: FlyingAndFly

How to set a default selected effect for VChart pie charts?

FlyingAndFly — Mon, 17 Jun 2024 11:16:32 +0000

Problem description

When drawing a pie chart for the first time, I hope to highlight a block. How should I configure it?

Solution

First, you need to set the graphic style in the selected state in the chart spec configuration.

 pie: {
    state: {
      selected: { 
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },

Set the default selected data item through setSelected API

const vchart = new VChart(spec, { dom });
vchart.renderSync();
vchart.setSelected({
    // one data record
})

Code example

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    state: {
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },

};

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

vchart.setSelected({ type: 'oxygen'})

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

Results show

Can the VChart axis be set to avoid decimals?

FlyingAndFly — Mon, 17 Jun 2024 10:59:30 +0000

Problem description

I am using a bar chart to describe the number of problems. There should be no decimal place in the circumstances. How to avoid the phenomenon of axis text appearing 0.5?

Solution

You can use the axes.tick.noDecimalsproperty to configure continuous axes without decimals

 axes: [
    {
      orient: 'left',
      tick:{
        noDecimals: true
      }
    }
  ],

Code example

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 1 },
        { month: 'Tuesday', sales: 1 },
        { month: 'Wednesday', sales: 2 },
        { month: 'Thursday', sales: 0 },
        { month: 'Friday', sales: 1 }
      ]
    }
  ],
  axes:[{orient:"left", tick:{noDecimals: true}}],
  xField: 'month',
  yField: 'sales'
};

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

How to display a color block area in a chart that covers a specified x-axis range?

FlyingAndFly — Tue, 21 May 2024 11:27:55 +0000

Problem description

Similar to the effect shown in the figure below, I hope to draw a color block within the specified x-axis range in the chart. How should I configure it in VChart?

Solution

You can achieve this through the markAreacomponent, using the markArea.coordinatesproperty to declare the range of data to be annotated.

Coordinates: Support configuring data values, VChart will automatically map the data to canvas coordinates for range drawing.

  markArea: [
    {
      coordinates: [
        {
          Date: 'Jan-20',
          Price: 0.18
        },
        {
          Date: 'Mar-23',
          Price: 0.18
        },
        {
          Date: 'Mar-23',
          Price: 0.12
        },
        {
          Date: 'Jan-20',
          Price: 0.12
        }
      ],
      label: {
        text: 'Electricite prices have surged since 2020',
        position: 'insideTop'
      }
    }
  ],

Code example

https://visactor.io/vchart/demo/marker/mark-area-basic

Results show

How to configure the Y-axis with both title and unit in the VChart line chart?

FlyingAndFly — Tue, 21 May 2024 11:25:29 +0000

Problem description

In the line chart, the Y-axis has both titles and units. How to configure them?

Solution

Axis titles can be configured through the axes.titleproperty
You can configure axes.unitto set the unit of the axis component

 axes: [
    {
      orient: 'left',
      title:{
        visible: true,
        text:'This is axis title'
      },
      unit:{
        visible: true,
        text:'Axis unit'
      }
    }
  ],

Code example

🔔 The following code can be copied and pasted into the editor to see the effect.

const spec = {
  type: 'bar',
  width: 450,
  height:300,
  xField: 'month',
  yField: 'sales',
  axes: [
    {
      orient: 'left',
      title:{
        visible: true,
        text:'This is axis title'
      },
      unit:{
        visible: true,
        text:'Axis unit'
      }
    }
  ],
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 32 }
      ]
    }
  ]
};

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

How to configure a bar chart to display more of the axis labels when the labels are too long?

FlyingAndFly — Tue, 21 May 2024 11:20:46 +0000

Problem description

The axis text labels in the chart are relatively long. I hope to increase the axis width to display more text. How should I configure it?

Solution

You can configure axes.width to set the width of the axis component.

Width: '50%': Configure the percentage string, which represents that the component width accounts for half of the chart during layout

  axes: [
    {
      orient: 'left',
      width: `50%`
    }
  ],

Width: 100: Configure a fixed value, representing the pixel width of the component width during layout

Code example

const spec = {
  type: 'bar',
  width:450,
  height: 250,
  data: [
    {
      id: 'barData',
      values: [
    {
        "name": "Product-Name-:Apple",
        "value": 214480
    },
    {
        "name": "Product-Name-:Google",
        "value": 155506
    },
    {
        "name": "Product-Name-:Amazon",
        "value": 100764
    },
    {
        "name": "Product-Name-:Microsoft",
        "value": 92715
    },
    {
        "name": "Product-Name-:Coca-Cola",
        "value": 66341
    },
    {
        "name": "Product-Name-:Samsung",
        "value": 59890
    },
    {
        "name": "Product-Name-:Toyota",
        "value": 53404
    },
    {
        "name": "Product-Name-:Mercedes-Benz",
        "value": 48601
    },
    {
        "name": "Product-Name-:Facebook",
        "value": 45168
    },
    {
        "name": "Product-Name-:McDonald's",
        "value": 43417
    },
    {
        "name": "Product-Name-:Intel",
        "value": 43293
    },

]
    }
  ],
  direction: 'horizontal',
  xField: 'value',
  yField: 'name',
  axes: [
    {
      orient: 'bottom',
      visible: false
    },
    {
      orient: 'left',
      width: `50%`
    }
  ],
  label: {
  }
};

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

What are the methods for data sampling in VChart charts?

FlyingAndFly — Tue, 21 May 2024 11:16:03 +0000

Problem Description

May I ask if there are any data sampling configurations in vchart to improve performance when the amount of data in the line chart is large?

Solution

VChart line chart, since the 1.6.0version supports data sampling method configuration.

The downsampling strategy for line charts when the data volume is much larger than the pixel points can effectively optimize the drawing efficiency of the chart when turned on. It is turned off by default, that is, all drawings without filtering Data Points. Optional values for samplingconfiguration:

'Lttb': Using Largest-Triangle-Three-Bucket algorithm, it can maximize the trend, shape and extreme value of the sampled line.
'Min': Take the minimum value of the filter point
'Max': take the maximum value of the filter point
'Sum': take the sum of the filter points
'Average': Take the average of the filter points

The sampling effect can be adjusted through the samplingFactor configuration.

sampling: 'lttb',
samplingFactor: 0.1,

Code Example

https://visactor.io/vchart/demo/line-chart/line-sampling

Results

Quote

github：https://github.com/VisActor/VChart
Sampling option: https://visactor.io/vchart/option/lineChart#sampling

How to configure the style of pager arrow in VChart legend?

FlyingAndFly — Fri, 10 May 2024 09:08:33 +0000

Problem Description

I used a dark theme and hope to make the page flipper style more prominent. How should I configure it?

Solution

Legend pager corresponds to the configuration of pager.

The pager text color can be configured through pager.textStyle.fill.
The page flipper button color can be configured through pager.handler.style.
The style of the page turning button in the unavailable state needs to be configured through pager.handler.state.disable.fill.

  legends: {
    visible: true,
    pager:{
      textStyle:{
        fill:"rgb(170,170,170)"
      },
      handler:{
        style:{
          fill:'rgb(170,170,170)'
        },
        state:{
          disable:{
            fill:'rgb(47,69,84)'
          }
        }
      }
    }
  },

Code Example

🔔 The following code can be copied and pasted into the editor to see the effect.


const spec = {
  type: 'pie',
  theme:"dark",
  width: 300,
  height: 300,
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  legends: {
    visible: true,
    pager:{
      textStyle:{
        fill:"rgb(170,170,170)"
      },
      handler:{
        style:{
          fill:'rgb(170,170,170)'
        },
        state:{
          disable:{
            fill:'rgb(47,69,84)'
          }
        }
      }
    }
  },
}

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

vchart.getCanvas().style.outline = '1px solid orange';

Results

Quote

Related configuration: https://visactor.io/vchart/option/barChart-legends-discrete#pager
github：https://github.com/VisActor/VChart

How to configure pie chart size in VChart?

FlyingAndFly — Fri, 10 May 2024 09:06:47 +0000

Problem Description

The page is narrow, how to adjust the configuration of VChart to make the pie chart occupy as much screen space as possible

Solution

Cancel the default chart padding.

VChart sets a certain margin for all charts by default. You can configure padding: 0 to cancel the default margin.
Adjust the outerRadius the pie chart.

By default, the pie chart does not fill the entire canvas, you can configure outerRadius: 1 to set the outer radius ratio to the highest.

Code Example

const data = [
  { 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' }
];

const spec = {
  type: 'pie',
  data: [
    {
      id: 'pie',
      values: data
    }
  ],
  outerRadius:1,
  padding:0,
  background:'#eeeeee',
  categoryField: 'category',
  valueField: 'value',

};

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

vchart.renderSync();

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

Results

Quote

Pie chart configuration item
github：https://github.com/VisActor/VChart

How to set VChart axis gridlines as dashed lines？

FlyingAndFly — Fri, 10 May 2024 09:04:31 +0000

Problem Description

How to set the grid lines of the coordinate axis in VChart as dashed lines and adjust the style of the dashed lines?

Solution

In VChart, the configuration item for axis gridline style is axes[i].grid.style. You can adjust the solid line to the dashed line effect you want by configuring the lineDashproperty.

lineDashuses a set of values to specify the alternating length of lines and gaps that describe the pattern. For example:

lineDash: [2, 3]; 
lineDash: [0]; // solid line

Code Example

🔔 The following code can be copied and pasted into the editor to see the effect.

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  axes:[
    {
      orient:'left',
      grid:{
        style:{
          stroke:"black",
          lineDash:[5,5]
        }
      }
    },
    {
      orient:'bottom',
      grid:{
        visible: true,
        style:{
          stroke:"black",
          lineDash:[5,5]
        }
      }
    }
  ],
  xField: 'time',
  yField: 'value'
};

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

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

Results

Quote

What are the methods for formatting VChart chart labels?

FlyingAndFly — Fri, 26 Apr 2024 11:17:37 +0000

Description

In the VChart bar chart, the default display is the label of the corresponding value of the bar. I want to display something like 'x-axis name: y value' . What are the ways to customize the label display?

Solution

There are two recommended configuration methods:

Configure the formatting function through label.formatMethod.
1. The function parameter is (text: string | string [], data?: any) ,text is the default displayed text, and data is the related data.
2. The return value of the function can be a string or a string array. Among them, the string array will be displayed as a newline by default.
3. If you want to configure it as rich text, the return value is the rich text configuration object.

label: {
    formatMethod:(value, data) => `${data.name}: ${value}`
}

Configure the template string through label.formatter.

label: {
   formatter: `{name} : {value}`
}

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

FlyingAndFly — Fri, 26 Apr 2024 11:13:46 +0000

Description

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

Solution

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

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;
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",
      },
    ],
  };
},

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;

How to implement multi-group bar chart and interact with highlighting by grouping dimension?

FlyingAndFly — Fri, 19 Apr 2024 08:46:02 +0000

😊 I am a developer of VChart, so I will introduce the solution in VChart.

Description

Solution for implementing a multi-group bar chart similar to the following figure:

Expect two groups to differentiate in style through color transparency.
When the mouse hovers over a column block, all blocks of the same color are highlighted in linkage.

Solution

Requires 4 data fields:

3 grouping fields: There are 3 layers of grouping on the x-axis, corresponding to fields xField: ['type', 'type1', 'type2'] ;
series field: used to distinguish color series, seriesField: 'color'

Highlight interaction: You can configure the built-in element-highlight-by-group interaction in VChart, specify the interaction highlighting state to be named 'highligh' , so as to add a stroke effect to the column in the graphic style:

  interactions:[
    {
       type: 'element-highlight-by-group',
       highlightState:'highlight'
    }
  ],
  bar:{
    state:{
      highlight:{
        stroke:"black",
        lineWidth:1,
        zIndex:100
      }
    }
  },

Demo Code

You can paste the code in editor: https://visactor.io/vchart/demo/line-chart/basic-line

const spec = {
  type: 'bar',
  height:400,
  data: [
    {
      values: [
        { type: 'Category One', min: 80,  color: 'A', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 75,  color: 'C', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T1' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T2' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T3' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T4' },

        { type: 'Category One', min: 80,  color: 'A', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 75,  color: 'C', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T1' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T2' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T3' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T4' },



        { type: 'Category Two', min: 76,  color: 'A', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 65,  color: 'C', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T1' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T2' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T3' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T4' },

        { type: 'Category Two', min: 80,  color: 'A', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 75,  color: 'C', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T1' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T2' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T3' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T4' },
      ]
    }
  ],
  interactions:[
    {
       type: 'element-highlight-by-group',
       highlightState:'highlight'
    }
  ],
  bar:{
    style:{
      fillOpacity:(data) => data.type1 === 'p' ? 1: 0.5
    },
    state:{
      highlight:{
        stroke:"black",
        lineWidth:1,
        zIndex:100
      }
    }
  },
  xField: ['type', 'type1', 'type2'],
  yField: 'min',
  seriesField: 'color',
  axes: [
    {
      orient:"left",
      label:{ visible: false},
      grid:{ style:{ lineDash:[4,4], stroke:'#dddddd'} }
    },
    {
      orient:"bottom",
      paddingInner:[0.1,0.05,0.5]
    }
  ],
  tooltip:{
      visible:false
  }
};

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

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

DEV Community: FlyingAndFly

How to set a default selected effect for VChart pie charts?

Problem description

Solution

Code example

Results show

Related Documents

Can the VChart axis be set to avoid decimals?

Problem description

Solution

Code example

Results show

Related Documents

How to display a color block area in a chart that covers a specified x-axis range?

Problem description

Solution

Code example

Results show

Related Documents

How to configure the Y-axis with both title and unit in the VChart line chart?

Problem description

Solution

Code example

Results show

Related Documents

How to configure a bar chart to display more of the axis labels when the labels are too long?

Problem description

Solution

Code example

Results show

Related Documents

What are the methods for data sampling in VChart charts?

Problem Description

Solution

Code Example

Results

Quote

How to configure the style of pager arrow in VChart legend?

Problem Description

Solution

Code Example

Results

Quote

How to configure pie chart size in VChart?

Problem Description

Solution

Code Example

Results

Quote

How to set VChart axis gridlines as dashed lines？

Problem Description

Solution

Code Example

Results

Quote

What are the methods for formatting VChart chart labels?

Description

Solution

Related Documents

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

Description

Solution

Code Example

Related Documentation

How to implement multi-group bar chart and interact with highlighting by grouping dimension?

Description

Solution

Demo Code