Change Plot Type

Plot refers to a line in the line chart, a column in the column chart or an area in the area chart.

In this article, we'll see how to change the plot types of the chart.

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

The chart is shown below:

Online Sales of a SuperStore2011Jul2012Jul2013Jul2014Jul2015Sales2004006002011201220132014Jan 04, 2011 - Dec 31, 2014Sales3YAll

To change the plot type of the above chart change the code below in the index.html file:

let fusionDataStore = new FusionCharts.DataStore();
let fusionTable = fusionDataStore.createDataTable(data, schema);

new FusionCharts({
  type: "timeseries",
  renderAt: "container",
  width: "95%",
  height: 650,
  dataSource: {
    data: fusionTable,
    chart: {},
    caption: {
      text: "Online Sales of a SuperStore in the US"
    },
    yaxis: {
      plot: {
        value: "Sales",
        type: "column"
      }
    }
  }
}).render();
Were you able to implement this?

In the above code:

  • Create plot object for y-axis in dataSource.

  • Set the type attribute to column.

The chart with the updated plot type is shown below:

Online Sales of a SuperStore in the US2011Jul2012Jul2013Jul2014Jul2015Sales02004006002011201220132014Jan 04, 2011 - Dec 31, 2014Sales3YAll

Click here to edit the above chart.

FusionTime includes several options to update the plot type of the chart. To know more, click here.