Plot Types

FusionTime supports three types of data structures - single-series, multivariate, and multi-series. In the chart anatomy provided below, you can see the components of a single-series line chart.

{ "header": "Chart Components (Anatomy)", "subHeader": "To know how FusionTime works, you need to understand the different components and concepts of a chart", "content": { "header": "In the sections below, you can find interactive annotated images describing various components and concepts of charts", "contentGroup": [{ "_itemHeader": "Chart with Single Series", "imgSrc": "ft-line-chart.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "85%", "topPosition": "17%", "annotationLinks": [] }, { "annotationNumber": "2", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "49.5%", "topPosition": "53%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/fusiontime/fusiontime-component/plot-types-in-fusiontime" }] }, { "annotationNumber": "3", "annotationName": "Time Axis", "annotationDesc": "Time Axis refers to a line on a chart that runs horizontally (left to right).", "annotationDescLinkPath": null, "leftPosition": "91%", "topPosition": "58%", "annotationLinks": [] }, { "annotationNumber": "4", "annotationName": "Time Markers", "annotationDesc": "Time markers are the names of the data points that are displayed on the time axis of a chart", "annotationDescLinkPath": null, "leftPosition": "75%", "topPosition": "58.5%", "annotationLinks": [{ "linkDesc": "You can customize the way time markers look. Learn more about their usage ", "linkPath": "/fusiontime/fusiontime-component/time-marker" }] }, { "annotationNumber": "5", "annotationName": "Data Markers", "annotationDesc": "Data markers are the names of the data points that are displayed on the chart plot.", "annotationDescLinkPath": null, "leftPosition": "23%", "topPosition": "18.5%", "annotationLinks": [{ "linkDesc": "You can customize the way time markers look. Learn more about their usage ", "linkPath": "/fusiontime/fusiontime-component/data-markers" }] }, { "annotationNumber": "6", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to a line on a chart that runs vertically (up-down) through zero. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/y-axis-in-fusiontime", "leftPosition": "12%", "topPosition": "12%", "annotationLinks": [{ "linkDesc": "You can customize the way the Y-axis looks. Learn more about it ", "linkPath": "/fusiontime/fusiontime-component/y-axis-in-fusiontime#style-definition" }] }, { "annotationNumber": "7", "annotationName": "Y-Axis Title", "annotationDesc": "It refers to the title of the y-axis. You can customize it using Style Definition. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/y-axis-in-fusiontime#style-definition", "leftPosition": "3%", "topPosition": "35%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Standard Range Selector", "annotationDesc": "It refers to the selector for standard time periods. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/standard-range-selector", "leftPosition": "23%", "topPosition": "8%", "annotationLinks": [] }, { "annotationNumber": "9", "annotationName": "Custom Range Selector", "annotationDesc": "It refers to the selector for custom time periods. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/custom-range-selector", "leftPosition": "62%", "topPosition": "8%", "annotationLinks": [] }, { "annotationNumber": "10", "annotationName": "Reference Zone", "annotationDesc": "Reference zones help you identify data plots that fall within a particular range of data values. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/reference-zone-in-fusiontime", "leftPosition": "91.5%", "topPosition": "34%", "annotationLinks": [] }, { "annotationNumber": "11", "annotationName": "Crossline", "annotationDesc": "Cross line is a vertical line/area used as a quick reference for data plots. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/crossline-in-fusiontime", "leftPosition": "37.5%", "topPosition": "28%", "annotationLinks": [] }, { "annotationNumber": "12", "annotationName": "Time Navigator", "annotationDesc": "It lets you narrow the focus to a specific time period without losing context of the entire data. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/time-navigator", "leftPosition": "10%", "topPosition": "77%", "annotationLinks": [] }, { "annotationNumber": "13", "annotationName": "Legend", "annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.", "annotationDescLinkPath": null, "leftPosition": "24%", "topPosition": "90%", "annotationLinks": [ { "linkDesc": "You can choose to show/hide the legend. Learn how to do it ", "linkPath": "/fusiontime/fusiontime-component/legend-in-fusiontime#show-hide-the-legend" }, { "linkDesc": "You can choose to hide one or more legend items when the chart is initially rendered. Learn how to do it ", "linkPath": "/fusiontime/fusiontime-component/legend-in-fusiontime#initially-hidden-legend-item" }] }, { "annotationNumber": "14", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point. Learn more about it ", "annotationDescLinkPath": "/fusiontime/fusiontime-component/tooltip-in-fusiontime", "leftPosition": "55%", "topPosition": "36%", "annotationLinks": [] } ] } ] } }

Once you select the data structure that suits your data the best, you can choose the best plot type to go with it. The plot type of a chart refers to a line in a line chart, a column in a column chart, area in an area chart, etc.

FusionTime supports the following plot types:

  • Line
  • Column
  • Stacked Column
  • Grouped Column
  • Area
  • Stacked Area
  • Smooth Area
  • Spline
  • Step Line
  • Candlestick
  • OHLC
  • Range Series Charts
    • Column Range
    • Area Range

By default, the chart renders with a line plot. However, you can specify the plot type in a chart, using the plotType property inside the yAxis object. Refer to the code below:

yAxis: {
    "plot": {
        "value": "Sales",
        "type": "column"
    }
}

In this article, we'll see different types of data plots to render a chart.

Line

Let’s create a time series chart using line as a data plot showcasing online sales of SuperStore in United States of America.

The time series chart is shown below:

Loading data for chart…

To check out the detailed step to render the above chart, click here.

Column

To render a time series chart with column as data plot, set the value of type attribute to column.

The above time series chart, rendered with column plot is shown below:

Loading data for chart…