> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/mix-time-line-chart.md).

# Mix Time Line Chart

Mix time imeline charts illustrate events, in chronological order — for example the progress of a project, advertising campaign, acquisition process — in whatever unit of time the data was recorded — for example week, month, year, quarter.

{% hint style="info" %}
You can find a more in depth explanation about the Mix Time Line on [this ](<https://echarts.apache.org/examples/en/index.html#chart-type-line >)page:

&#x20;[https://echarts.apache.org/examples/en/index.html#chart-type-line ](<https://echarts.apache.org/examples/en/index.html#chart-type-line >)
{% endhint %}

![Image 1: The Mix time line](/files/bMWAQ0kmdbuLbN6BpwCr)

**Properties of Mix Time Line Chart**

<table data-header-hidden><thead><tr><th width="212"></th><th width="124"></th><th width="145"></th><th></th></tr></thead><tbody><tr><td><strong>Property Name</strong></td><td><strong>Data type</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>Data source</td><td>List</td><td>Data Model</td><td>The main datalist contains information about the series: X &#x26; Y values, series, years, series type and series color.</td></tr><tr><td>Series</td><td>Text</td><td>Expression</td><td>Series or Categories of the datalist. These values will also be used as the legends.</td></tr><tr><td>X axis category</td><td>Text</td><td>Expression</td><td>X axis values for the chart.</td></tr><tr><td>Y axis value</td><td>Number</td><td>Expression</td><td>Numeric Y axis values for the chart.</td></tr><tr><td>Years</td><td>Number</td><td>Expression</td><td>Years that will be used for the timeline. Each row of data needs one.</td></tr><tr><td>Series type</td><td>Text</td><td>Expression</td><td>Type of chart to display for each series. It accepts values of: "bar" or "line"</td></tr><tr><td>Series color</td><td>Text</td><td>Expression</td><td><p>The color of each series. It uses an rgba type or Hexadecimal type of color.</p><p>For example: "rgba(255,0,0,0.5)" or "#FF0000".</p></td></tr><tr><td>Play interval</td><td>Number</td><td>Expression</td><td>Amount of time (milliseconds) delay before each year change. 1000 = 1second.</td></tr><tr><td>Auto play</td><td>Boolean</td><td>Expression</td><td>Transitions starts as soon as the page gets uploaded.</td></tr><tr><td>Show grid lines</td><td>Boolean</td><td> </td><td>To activate the grid lines of the chart.</td></tr><tr><td>Show vertical grid lines</td><td>Boolean</td><td>Expression</td><td>To activate the vertical grid lines of the chart.</td></tr><tr><td>Show horizontal grid lines</td><td>Boolean</td><td>Expression</td><td>To activate the horizontal grid lines of the chart.</td></tr><tr><td>Show pie chart</td><td>Boolean</td><td> </td><td>Adds a pie chart with the total of the series per year.</td></tr><tr><td>Pie data source</td><td>List</td><td>Expression</td><td>Datalist that includes a row for each serie to show on the pie chart.</td></tr><tr><td>Pie chart title</td><td>Text</td><td>Expression</td><td>Title for the tooltip that appears when the user hovers over the pie chart.|</td></tr><tr><td>Pie chart series reference</td><td>Reference</td><td>Expression</td><td>A reference from the main data source which must point to the main chart series values.</td></tr><tr><td>Pie horizontal position</td><td>Text</td><td>Expression</td><td>Horizontal Position for the Pie Chart(From left to right) in percentage values.</td></tr><tr><td>Pie vertical position</td><td>Text</td><td>Expression</td><td>Vertical Position for the Pie Chart(From top to bottom) in percentage values.</td></tr><tr><td>Pie radius</td><td>Text</td><td>Expression</td><td>Radius value for the Pie Chart in percentage values.</td></tr><tr><td>Pie border color</td><td>Text</td><td>Expression</td><td><p>Color for the border of the pie chart. It uses an rgba type or Hexadecimal type of color.</p><p>For example: "rgba(255,0,0,0.5)" or "#FF0000".</p></td></tr><tr><td>Pie border width</td><td>Number</td><td>Expression</td><td>Numerical value for the border line width.</td></tr><tr><td>Pie label legend position</td><td>Text</td><td>Dropdown</td><td>Set the position of the label in the pie. (inside, outside).</td></tr><tr><td>Y axis units</td><td>Text</td><td>Expression</td><td>Y axis legend.</td></tr><tr><td>Legend orientation</td><td>Text</td><td>Dropdown</td><td>Set the orientation of the legend. (Vertical, horizontal).</td></tr><tr><td>Legend position</td><td>Text</td><td>Dropdown</td><td>Set the position of the legend. (Left. Center, Right).</td></tr><tr><td>Width</td><td>Text</td><td>Expression</td><td>Width of the chart. It can be settle in px values ('500px') or percentages (100%). Default value is 100%</td></tr><tr><td>Height</td><td>Text</td><td>Expression</td><td>Height of the chart. It can be settle in px values ('500px') or percentages (100%). Default value is 100%.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/wemtipsandtricks/widgets/advanced-charts/mix-time-line-chart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.