DEV Community: Darkside

How to use the tooltip and abscissa in the vchart library?

Darkside — Thu, 27 Jun 2024 08:08:14 +0000

Question title

How to use the tooltip and abscissa in the vchart library?

Problem description

I am using the vchart library to create charts, but I am having trouble setting the tooltip and abscissa. I tried to configure the tooltip, but it did not display, even if I set it to visible.
In addition, I also hope to be able to customize the content of the x-axis. I'm not sure if my usage is incorrect or there are other issues.

Solution

Firstly, regarding the configuration issue of tooltip, your setting method is correct.
Then, regarding the issue of tooltip not taking effect, you need to check if your content is written in the wrong place. If you want to customize the content of the tooltip, you can refer to this example of vchart .
Finally, regarding the customization of the x-axis, you can achieve it by setting the style in axes.label . You can also use formatMethod to customize the content. The specific implementation method can refer to this example of vchart .

How to set the font size of title to semi in VChart for heading4?

Darkside — Thu, 27 Jun 2024 07:51:11 +0000

Question title

How to set the font size of title to semi in vchart for heading4?
Problem description
I am using the @visactor/vchart library for data lake visualization. However, I encountered a problem where I want to set the font size of the title in vchart to semi's heading-4 font size, but I don't know how to pass this variable in.

Solution

The new version of vchart provides a package called vchart-semi-theme, which can automatically crawl semi CSS variables on the page, so most of the color values of the chart can use this function. As for font size, although this package currently does not directly provide the function of introducing semi variables, you can manually modify the spec or register the theme to achieve the goal.
Usage is as follows:
First, install the vchart-semi-theme package
Use Documentation: https://visactor.io/vchart/guide/tutorial_docs/Theme/Theme_Extension
You can refer to some examples: https://vp4y9p.csb.app/

Note: Since the use of vchart-semi-theme requires crawling the CSS variables of the page, please make sure that your page contains the required semi CSS variables.

How to add custom content at the bottom of the tooltip card in VChart?

Darkside — Thu, 27 Jun 2024 07:43:17 +0000

Problem description

I am using VChart for programming data lake visualization and have encountered some issues. I want to add some custom content at the bottom of the tooltip card, especially a button.
However, I found that when using vChart.renderAsync ().then, it seems that we cannot obtain the tooltip of the className we defined, and we have to wait for a while to obtain it. I do not want to implement this function through custom tooltips because I want to maintain the original component style. So, I would like to ask, is there a better solution?

Solution

For this issue, it can be modified on the original DOM through the updateElement callback. Here is an example code:
tooltip: { ... updateElement: el => { el.style.width = 'auto'; el.style.height = 'auto'; el.style.minHeight = 'auto'; if (el.lastElementChild?.id !== 'test') { el.innerHTML = ''; const div = document.createElement('div'); div.id = 'test'; div.style.width = '200px'; div.innerText = 'test'; div.style.color = 'red'; el.appendChild(div); } } }

This code will be modified on the original DOM of the tooltip. You can choose to clear the tooltip content or keep the original content. However, it should be noted that the enterable support of the tooltip may not be ideal. When updating the tooltip location, the callback function will be executed every time.
After upgrading to vchart1.6.0 version, you can use the updateElement function.
The third parameter of updateElement can be taken to params.changePositionOnly. If it is true, it means that the default tooltip content has not changed. If the custom tooltip content needs to be updated synchronously with the default tooltip, you can consider filtering out the case where params.changePositionOnly is true.

Results show

After the above steps, I successfully added a button to the bottom of the tooltip card in vChart.

How to achieve the linkage effect in the vchart library?

Darkside — Thu, 27 Jun 2024 07:29:03 +0000

Question title

How to achieve the linkage effect of displaying the position of other charts when the mouse is moved in the vchart library?

Problem description

I encountered a problem when using the vchart library. I hope that when I move the mouse, other charts can also display their corresponding positions at the same time, that is, to achieve the linkage effect. I am not sure how to implement this function. Is there any relevant documentation for my reference?

Solution

This linkage effect can indeed be achieved. You need to listen to the dimensionHover event of a chart and then simulate dimensionHover for other charts.

First, you need to use the on method to listen to the dimensionHover event of the chart. The detailed API usage can be referred to the vchart API .

vChart.on('dimensionHover', function(params) {
// 处理逻辑
});
Then, you can use the setDimensionIndex method to simulate the dimensionHover effect on other charts. Please refer to the vchart API for API details.

vChart.setDimensionIndex(value, {
// options
});
Among them,

Value is the dimension value,
Options is a DimensionIndexOption type of parameter that can be used to filter the axis to trigger the dimension effect, configure tooltips and crosshairs, etc.

Issues with x-axis data overlap and y-axis data not being displayed when using vchart library

Darkside — Thu, 23 May 2024 03:36:48 +0000

Question title

Issues with x-axis data overlap and y-axis data not being displayed when using vchart library

Problem description

I encountered problems when using the vchart library to create bar charts. Whether I tested it on the emulator or the real machine, the data on the x-axis (bottom axis) would overlap.

In addition, I also noticed that some of the top labels of the bar chart will be moved inside the bar. Is this normal?

Solution

There are the following solutions:
Regarding the issue of overlapping data on the x-axis, it is because the sampling setting has been turned off. Originally, it was hoped that all data on the x-axis could be displayed, which resulted in data overlap. You can use a scroll bar to solve this problem and add the following configuration to the chart:

scrollBar: [ { orient: 'bottom', start: 0, end: 0.5, roam: true } ]

Regarding the issue of moving the top label of the bar chart to the inside of the bar, this is because the system automatically adjusts to prevent the labels from overlapping each other. This feature can be turned off by setting the label configuration overlap to false.

label: {overlap: false}

Results show

Online demo: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-ytl8dz

How to obtain the relative position of brush in the coordinate system in the vchart chart library?

Darkside — Thu, 23 May 2024 02:53:26 +0000

Question title

How to obtain the relative position of brush in the coordinate system in the vchart chart library?

Problem description

When I was using the vchart library, I encountered a problem. I listened to the onBrushEnd event and wanted to obtain the relative position of the area selected by the brush in the coordinate system. That is, after I drew a frame on the chart, I wanted to obtain the position range of this area on the x/y axis. I tried all the methods I could think of, but did not find the corresponding data.

Solution

According to the design and usage of vchart, currently the vchart API does not directly provide this information, but it is still possible to obtain this necessary information through some other means. The specific steps are as follows:

Use vchart.getAllComponents () to find the brush component

In the brush component, there is a property called _brushComponent. AABBBounds , which is the relative position of the checkbox in the region.

Similarly, with the vchart.getAllComponents () method, we can find the components for the x and y axes.

In the found axis component, we can use the _scale .invert (position) method to convert the position of AABBBounds obtained in the previous step to specific values on the x and y axes.

In order to prevent a very small position shift when the user clicks and accidentally triggers the brush drawing, we can also set a sizeThreshold property for the brush. This property means the checkbox size threshold, which literally means the minimum size of the box you need to draw. The brush event will only be triggered when the size of the box is greater than this threshold.

How to clear the box selection at the end of the onbrushEnd event when using vchart?

Darkside — Fri, 17 May 2024 09:21:07 +0000

Question title

How to clear the box selection at the end of the onbrushEnd event when using vchart?

Problem description

I am using the @visactor/vchart chart library for chart development and encountered a problem. I need to clear the brush box at the end of the onbrushEnd event, but currently I have not found a suitable API to implement this requirement.

Solution

Currently, there is no API that directly corresponds to this requirement, but there is a relatively special implementation method that can solve this problem. The specific code is as follows:

cs.on('brushEnd', (params) => {
cs.getChart()?.getAllComponents().forEach(c => {
if(c.name === 'brush') {
c?._brushComponents?.forEach(c => c._container.incrementalClearChild())
}
})
})

The above solution is to retrieve all components and traverse them after triggering the'brushEnd 'event. If a component is named'brush', it will be cleared.

Results show

After the code runs, you can clear the box selection after the onbrushEnd event ends.
Online demo: https://codesandbox.io/p/sandbox/grouped-bar-chart-shows-all-the-group-labels-forked-2t4jf7

Does VChart's multi-group bar chart support multi-layer axis labels?

Darkside — Fri, 17 May 2024 08:48:01 +0000

Question title

Does VChart's multi-group bar chart support multi-layer axis labels?

Problem description

I am a developer who uses the VChart chart library. Recently, I encountered a problem where I wanted to use multi-layer axis labels in multi-group bar charts, like the effect shown in the figure below.

Solution

When there are multiple fields in xField in spec, bar chart grouping will be enabled. You can enable displaying all grouping axes by setting showAllGroupLayers in the x-axis of axes to true.
You can refer to the following example:

const spec = {
    type: 'bar',
    data: [
        {
            values: [
                { type: 'Category One', min: 76, max: 100, range: 'A', type2: 'p', color: 'A_p' },
                //... 其他数据项
            ]
        }
    ],
    xField: ['type', 'range', 'type2'],
    yField: 'in',
    seriesField: 'color',
    paddingInner: [0.6, 0.6, 0.6],
    bandPadding: [0.6, 0.6, 0.6],
    label: { position: 'bothEnd' },
    axes: [
        { orient: 'bottom', showAllGroupLayers: true, sampling: false, tick: { tickCount: 2 } }
    ],
    legends: { visible: true }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Results show

The bar chart will be grouped by xField and display the labels of each group.

Online demo: https://codesandbox.io/p/sandbox/line-chart-single-selected-forked-hpvd3j

Can we limit the default rendered lines in a vchart multi-line chart?

Darkside — Wed, 08 May 2024 09:30:38 +0000

Question Title

Can we limit the default rendered lines in a vchart multi-line chart?

Question Description

While using vchart, I encountered a problem. I'm making a multiple-line chart, and I want to ask if this multi-line chart can limit the default rendered lines? For instance, can I make it only default render one line?

Solution

This can be achieved. You need to use the configuration item legends.defaultSelected to set the legend items that are selected by default when the legend is initialized. The element in the array is the name of the legend item. For example, you can set defaultSelected: ['Type D'], which indicates that the line with the legend item named 'Type D' will be rendered by default. Here is a complete code example:

const spec = { type: 'line', data: [ { id: 'line', values: data } ], xField: 'year', yField: 'value', seriesField: 'name', legends: { orient: 'right', selectMode: 'single', // Configure legend selection mode defaultSelected: ['Type D'], title: { visible: true, text: 'Single Select' } }, axes: [ { orient: 'left', label: { inside: true, space: 2, style: { textBaseline: 'bottom', textAlign: 'start', fontWeight: 'bold' } }, tick: { visible: false }, domainLine: { visible: false }, title: { visible: true, text: 'Axis Title' } } ] };

Result

After running the code, the multi-line chart will only render the line of 'Type D' by default.

Online demo：https://codesandbox.io/p/sandbox/line-chart-legend-shape-and-color-forked-gq3gcv

Relevant Documents

VChart defaultSelected configuration item: https://visactor.io/vchart/option/barChart-legends-discrete#defaultSelected
VChart github: https://github.com/VisActor/VChart

In vchart, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?

Darkside — Wed, 08 May 2024 07:50:18 +0000

Question Title

In vchart charts, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?

Question Description

I am using vchart to make charts and have encountered two issues that I would like to ask everyone. My area chart style has been adjusted to a gradient color, but I don't want the legend color to follow the gradient of the area chart, how should I set it?

In addition, I did not find in the information that the legend shape provides a rounded rectangle option, is there any other plan to implement the drawing of rounded rectangles?

Solution

Hello, these two problems can be solved through configuration.

If you don't want the legend color to follow the gradient of the area chart, you can change the color of the main mark of the series by configuring the seriesMark.
seriesMark: 'point',
As for how to draw legends of rounded rectangles, you can set the symbolType graphic attribute of legend graphics by configuring it. The specific setting content is as follows:
item:{ shape:{ style:{ symbolType:"M 462 282 c 0 99.405 -80.595 180 -180 180 h -540 c -99.405 0 -180 -80.595 -180 -180 v -540 c 0 -99.405 80.595 -180 180 -180 h 540 c 99.405 0 180 80.595 180 180 v 540 z" } } }

Result Show

Online demo: https://codesandbox.io/p/sandbox/line-chart-hover-forked-t74cvw?file=%2Fsrc%2Findex.ts%3A66%2C13

How to implement hover effect on points in vchart chart library?

Darkside — Wed, 08 May 2024 07:15:40 +0000

Title

How to implement hover effect on points in vchart chart library?

Description

I encountered a problem when using the vchart chart library for visualization development. When using the lightCharts chart library, I can easily implement the hover effect on points, but when I switch to the vchart chart library, I found that I cannot achieve the same effect with the same configuration. I set the size, color and other properties of the points in series.point:

point: { interactive: true, zIndex: 10, visible: true, bar: { style: { fill: 'red', size: 10, }, }, state: { dimension_hover: { size: (datum: any) => { return 10; }, fill: (datum: any) => { return 'red'; } } } }

But these settings seem to have no effect in the hover state. I want to know if I am missing any important configuration or if my configuration method is incorrect.

Solution

In my experience, you may need to add the state property in point and add the dimension_hover property in state to achieve the special effect in the hover state. The specific code example is as follows:

point: { style: { size: 0 }, state: { dimension_hover: { size: 10, outerBorder: { distance: 0, lineWidth: 6, strokeOpacity: 0.2 } } } }

Here, dimension_hover defines the effect when the mouse hovers over the point, and you can adjust these settings according to your needs.

You can also refer to the official demo of vchart for learning related configurations: https://visactor.bytedance.net/vchart/demo/area-chart/stacked-dash-area. If you need to demonstrate or edit your code online, vchart official website editor and codesandbox are good choices. You can upload your code to these platforms and send us the link, and we will provide further assistance for you.

Result

The hover effect on points in vchart was successfully implemented through the above method, and the reason why the original configuration did not take effect was found - the configuration in series.point conflicted.
Online demo reference: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-fx4ppt

Abnormal Y-axis display in the area chart of vchart library, where lower values appear higher

Darkside — Fri, 26 Apr 2024 06:58:12 +0000

Question Title

Issues with Y-axis display in vchart's area chart

Problem Description

I encountered an issue with display of y-axis values when using the vchart library to draw an area chart. Specifically, the visually taller chart corresponds to a smaller value. For example, I have two data points, one at 2.8w and the other at 3w6. However, on the chart, 3w6 appears visually shorter than 2.8w which I find perplexing. I do not know how to address this issue, and it hinders user experience.
At present, the code I used is shown below:

{ type: 'area', data: { fields: { country: { domain: ['China', 'USA', 'EU', 'Africa'], sortIndex: 0 } }, values: [ //...data values ] }, title: { visible: true, text: 'Stacked area chart of cosmetic products sales' }, xField: 'type', yField: 'value', seriesField: 'country', legends: [{ visible: true, position: 'middle', orient: 'bottom' }], tooltip: { dimension: { updateContent: data => { let sum = 0; data.forEach(datum => { sum += +datum.value; }); data.push({ hasShape: 'false', key: 'Total', value: sum }); return data; } } } };

Solution

The key to solving this issue lies in the "stack" attribute in the area chart of the vchart library. After careful observation, I realized that the problem was due to the stacking feature of the area chart.

Firstly, we need to understand the role of stacking in area charts. When stacking is enabled, values from different series will pile up. If you want to display difference or comparison between two series, you should disable stacking. However, if you want to show an overall trend that consists of two or more elements, stacking should be enabled. Therefore, whether to enable stacking or not should be based on your visualisation demands.

By default, area charts enable stacking. If you think this may impact your chart interpretation, feel free to disable it.

{ type: 'area', //...omit remaining specs title: { visible: true, text: 'Stacked area chart of cosmetic products sales' }, stack: false, xField: 'type', yField: 'value', seriesField: 'country', legends: [{ visible: true, position: 'middle', orient: 'bottom' }] };

Result Demonstration

With stacking disabled, the Y-axis of the chart will reflect the actual data values, avoiding visually taller charts representing smaller values.
Check out an online demo here: https://codesandbox.io/p/sandbox/line-chart-shows-on-the-left-most-of-canvas-forked-kgj8sj

DEV Community: Darkside

How to use the tooltip and abscissa in the vchart library?

Question title

Problem description

Solution

Related Documents

How to set the font size of title to semi in VChart for heading4?

Question title

Solution

Related Documents

How to add custom content at the bottom of the tooltip card in VChart?

Problem description

Solution

Results show

Related Documents

How to achieve the linkage effect in the vchart library?

Question title

Problem description

Solution

Related Documents

Issues with x-axis data overlap and y-axis data not being displayed when using vchart library

Question title

Problem description

Solution

Results show

Related Documents

How to obtain the relative position of brush in the coordinate system in the vchart chart library?

Question title

Problem description

Solution

Related Documents

How to clear the box selection at the end of the onbrushEnd event when using vchart?

Question title

Problem description

Solution

Results show

Related Documents

Does VChart's multi-group bar chart support multi-layer axis labels?

Question title

Problem description

Solution

Results show

Can we limit the default rendered lines in a vchart multi-line chart?

Question Title

Question Description

Solution

Result

Relevant Documents

In vchart, how do I set the legend not to follow the gradient color and draw a rounded rectangle legend?

Question Title

Question Description

Solution

Result Show

Related Documentation

How to implement hover effect on points in vchart chart library?

Title

Description

Solution

Result

Related Documents

Abnormal Y-axis display in the area chart of vchart library, where lower values appear higher

Question Title

Problem Description

Solution

Result Demonstration

Relevant Documents