Configure and use line and column charts-DataV(DataV)-阿里云帮助中心

Overview

A line and column chart combines a line chart and a column chart to represent two dimensions of the same category in a single chart, allowing you to visually compare trends and specific values across datasets.

Scenarios

Commonly used to analyze quantities alongside trends. The columns show specific values at each time point, while the lines reveal how those values change over time.

Preview

Prerequisites

Create a data dashboard. You can use a template, use a blank canvas, or use AI to generate one.
Your business data is prepared. For more information, see Data Source.

Add a line and column chart

Access the DataV console.
On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.
In the navigation pane on the left, under Widgets > Charts > Column Chart, click the Line and Column Chart widget to add it to the canvas.

You can also use the global search feature to add the widget.

Connect to business data

After you add the widget, connect it to your business data. Click the line and column chart, then on the Data Source tab on the right, select the data to display.

The following table describes the data fields accepted by this widget.

Field	Description
`x`	The category of the widget, such as time. This is the value of the x-axis.
`y1`	The value for the column chart. This represents a specific numeric value for a dimension, such as sales quantity or number of visits.
`y2`	The value for the line chart. This represents a numeric value for another dimension, such as growth rate, average value, or ratio.
`barColorField`	The color of the column chart. The same value indicates the same group of columns.
`ineColorField`	The color of the line chart. The same value indicates the same line.

The following code block shows a sample data structure for a line and column chart and a preview of the result.

[
  {
    "x": "2019-03",
    "y1": 800,
    "y2": 8000,
    "barColorField": "10",
    "lineColorField": "10"
  },
  {
    "x": "2019-04",
    "y1": 950,
    "y2": 6500,
    "barColorField": "10",
    "lineColorField": "10"
  },
  {
    "x": "2019-05",
    "y1": 700,
    "y2": 4000,
    "barColorField": "10",
    "lineColorField": "10"
  },
  {
    "x": "2019-06",
    "y1": 900,
    "y2": 3800,
    "barColorField": "10",
    "lineColorField": "10"
  },
  {
    "x": "2019-07",
    "y1": 800,
    "y2": 2200,
    "barColorField": "10",
    "lineColorField": "10"
  },
  {
    "x": "2019-03",
    "y1": 350,
    "y2": 7500,
    "barColorField": "20",
    "lineColorField": "20"
  },
  {
    "x": "2019-04",
    "y1": 900,
    "y2": 7000,
    "barColorField": "20",
    "lineColorField": "20"
  },
  {
    "x": "2019-05",
    "y1": 600,
    "y2": 4500,
    "barColorField": "20",
    "lineColorField": "20"
  },
  {
    "x": "2019-06",
    "y1": 450,
    "y2": 4500,
    "barColorField": "20",
    "lineColorField": "20"
  },
  {
    "x": "2019-07",
    "y1": 470,
    "y2": 3200,
    "barColorField": "20",
    "lineColorField": "20"
  },
  {
    "x": "2019-03",
    "y1": 300,
    "y2": 9000,
    "barColorField": "30",
    "lineColorField": "30"
  },
  {
    "x": "2019-04",
    "y1": 300,
    "y2": 6000,
    "barColorField": "30",
    "lineColorField": "30"
  },
  {
    "x": "2019-05",
    "y1": 300,
    "y2": 5000,
    "barColorField": "30",
    "lineColorField": "30"
  },
  {
    "x": "2019-06",
    "y1": 300,
    "y2": 3000,
    "barColorField": "30",
    "lineColorField": "30"
  },
  {
    "x": "2019-07",
    "y1": 300,
    "y2": 2000,
    "barColorField": "30",
    "lineColorField": "30"
  }
]

This section describes the core configuration items for the data source.

Configuration	Description
Select Data Source	Supports various data types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. Edit data fields in a visual table or in code.
Configure Filter (Optional)	Customize filter code to transform, filter, display, and perform simple calculations on data. For more information, see Manage data filters.
Configure Data Mapping	Map fields from the selected data source to the widget's fields. This enables real-time data matching. Click the icon to configure field styles.
View Response Result	Displays the data connected to the widget in real time. When the widget's data source changes, this section shows the latest data. Click the data response result to view the data field code. Click View Example to see the array type and sample code that the data source accepts. You can write your fields based on the example. Other data request configurations: Disable Loading State: If you check this box, the widget's initial loading content does not appear when the widget updates or when you preview the data dashboard. Controlled Mode: If you check this box, the widget does not request data when it initializes. Data requests can only be started by the blueprint editor or by global variable events. Auto Update Request: If you check this box, the platform polls for data updates at the interval you set. If you do not check this box, you must refresh the page manually or use the blueprint editor or global variable events to trigger data updates.

Configure the line and column chart

Configure styles

Styles are divided into basic and full configurations, switchable at the top of the Style tab. Basic configurations cover only color and text settings; full configurations provide comprehensive options. The following describes full configuration items.

Note

You can also click the icon and search for configuration items by keyword. Fuzzy matching is supported. For more information, see Search for configuration items.
Click the line and column chart widget on the canvas and select the icon above the widget to use AI to generate style configurations.

The following describes the related configuration items.

Configuration item	Description	Illustration
Global Configuration	Defines the widget's position, transparency, and interaction passthrough in the data dashboard. Opacity: The smaller the value, the more transparent the widget. The value ranges from 0 to `1`. Interaction Passthrough: If you turn this on, mouse events pass through the widget. This is useful when many widgets are on the dashboard and you need to interact with widgets in lower layers.
Chart Configuration	Defines the chart margins, and the color and display style of the column chart and line chart. Same Color for Line and Column: If you enable this feature, the line chart and the column chart share the same color scheme. If you disable this feature, you can select the colors for the line chart and the column chart separately as needed. Columns: Defines the display mode, grouping, and other styles of the column chart, such as the color, width, and labels of the columns. Display Format: Includes stacking and grouping styles. Stacking: Stacks multiple data series from the same category on top of each other to form a single column. Each subcategory represents a part of the column. This method is useful for showing part-to-whole relationships and trends over time. Grouping: Places columns from different data series side by side to directly compare values between groups. This method is useful for comparing differences between two or more variables. Custom Grouping: If you enable this feature, the data is split into finer granularities using the `barTrace` field in the data. The column part will have a stacked and grouped effect. Note The `barTrace` field represents the data series for the column chart, which contains the data and style definitions required for the column chart. Line: Defines the transparency of the line, the color of the line points, the line marker symbols, and the label styles.
Coordinate Configuration	Defines the data type of the x-axis, y1-axis, and y2-axis, and the display style of the axes, axis titles, axis labels, tick marks, and gridlines. Note Only when Data Type is set to Numeric, you need to configure the display range of the values. By default, the maximum and minimum values from the data are used. You can also click the drop-down list to enter the desired values. For the display format of y-axis labels, see Data display format description.
Animation Configuration	Enable Entrance Animation to define the animation effect and duration (in `ms`) when the widget loads.
Interaction Configuration	Defines the interactive display effect of the widget data, such as carousel display of column chart data. Carousel Effect: If you enable this feature, the widget data is displayed in a carousel based on the configuration of the Tooltip parameter. At the same time, the Tooltip configuration cannot be triggered by interaction. You can configure the carousel interval in `ms`. Connected Area: If you enable this feature, you can trigger it by hovering or clicking to display the columns with the same `barColorField` (color of the column chart) value in the data. Note If you enable the carousel effect, you cannot use the connected area effect. Tooltip: In the preview or published page, it is used to display the data details of a specified column of the column chart or a specified point of the line chart. You can configure the trigger method (hover or click), display position, text style, background style, and more for the tooltip as needed. Selected State: Used to configure the appearance style (color, outline, marker point, etc.) of a specified column or line after it is selected (triggered by hover or click).
Legend Configuration	Defines the legend style and the spacing between charts. Enable the Legend Switch to configure the position, spacing, width, and whether to allow page turning for the legend.
Annotation Configuration	Filter columns or lines by condition and annotate them with custom styles. Supports auxiliary lines and auxiliary boxes. The example annotates the maximum value of `y1` in red.

Advanced Configuration

Define interactions and data transfer relationships between the line and column chart and other widgets. The following table describes the configuration items.

Configuration item

Description

Illustration

Interaction Occurrence

Defines interactive behaviors with other widgets, global variables, and utility nodes to achieve widget interaction. For example, when data is updated, the line and column chart is highlighted.

Click Add Downstream Interaction Action to define the interactive behavior as needed.

Note

You can also click Smart Generate to use AI assistance to generate interaction occurrences through conversation.

Associate Global Variables

You can associate global parameters in the widget to pass parameters between widgets for interaction. Click the icon to enable the corresponding instruction and associate the required global variable with it.

Blueprint interaction

Use the Blueprint editor to define interaction logic between widgets through visual connections.

Procedure

On the canvas editor page, click the icon on the left side of the top menu bar to open the Blueprint editor.
In the layer node list, move the mouse pointer over the line and column chart widget and click the icon to add the widget to the main canvas.
Connect the relevant widgets as needed to configure the blueprint interaction.

The following figure shows an example.

Configuration item description

The following describes the interaction occurrences and their corresponding actions.

Category	Subcategory	Description
Event	When Data Is Updated	This event is triggered when the widget data is updated.
	When Data Request Status Changes	This event is triggered when the data request status changes. The status values include Void, Loading, Success, and Error.
	When a Data Item Is Selected	This event is triggered when a column in the line and column chart is selected. The data item corresponding to the column is also passed. The following code shows a data example. `{ "x": "", "y1": "", "y2": "", "barColorField": "", "lineColorField": "" }`
	When the Legend Is Clicked	This event is triggered when the legend is clicked. The following code shows a data example. `{ "value": "", "checked": false }`
Event	Import Data	The data is processed according to the component's drawing format and imported into the component to be redrawn. This eliminates the need to request server-side data again. An example of the data is as follows. `[ { "x": "", "y1": 0, "y2": "", "barColorField": "", "barTrace": "", "lineColorField": "" } ]`
	Request Data	Re-requests data from the server-side. The data thrown by upstream data processing nodes or layer nodes is used as parameters. For example, if the API data source configured for the line and column chart is `https://api.test` and the data passed to the Request Data action is `{ id: '1'}`, the final requested API is `https://api.test?id=1`.
	Highlight	The `data` field indicates the data item to be highlighted. The `style` field is used to define the chart style and visual presentation. Sample data { "data": { "x": "2019-03", "y1": 800, "y2": 8000, "barColorField": "", "barTrace": "", "lineColorField": "" }, "style": { "show": true, "line": { "show": true, "lineStyle": "solid", "lineWidth": 4, "fill": { "type": "linearGradient", "value": { "angle": 90, "stops": [ { "offset": 0, "color": "#00FF95" }, { "offset": 100, "color": "#588EE9" } ] } }, "dashedLength": 3, "dashedSpace": 8, "dottedLength": 2, "dottedSpace": 4 }, "marker": { "show": true }, "fillSet": { "show": false, "fill": { "type": "linearGradient", "value": { "angle": 90, "stops": [ { "offset": 0, "color": "#00ff95" }, { "offset": 100, "color": "rgba(88, 142, 233, 0.5)" } ] } } }, "columnStroke": { "lineStyle": "solid", "lineWidth": 1, "lineColor": "#ffffff", "dashedLength": 3, "dashedSpace": 8, "dottedLength": 2, "dottedSpace": 4 } } }
	Cancel Highlight	The data item for which to cancel the highlight.
	Move	Moves the widget to a specified position. The following code shows a data example. `{ // Movement method. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Optional values: linear\|easeInOutQuad\|easeInOutExpo. "animationEasing": "linear" } }`
	Toggle Visibility	Toggles the widget between visible and hidden. The following code shows a data example. `{ "animationType": "fade", "animationDuration": 1000, "animationEasing": "linear" }` animationType: The animation method. You can set this to appear (appear/disappear), fade (fade in/fade out), or slideToUp (fly in/fly out). If not configured, there is no animation. animationDuration: The animation duration. The default value is 1000 ms. animationEasing: The animation curve. You can set this to linear (uniform speed), easeInOutQuad (smooth), or easeInOutExpo (slow-fast-slow).
	Show
	Hide
	Update Widget Configuration	Dynamically updates the style configuration of the widget. First, on the Style panel of the widget, click Copy Configuration to Clipboard to get the widget's configuration data. As needed, change the field values of the corresponding styles in the data processing node on the Blueprint editor configuration page.