Overview – Combination Charts

You can combine different types of charts to form a combination chart. For example one chart can have a combination of area, line, column, etc. It should be kept in mind that series are rendered in the order they appear in data array. As a result, some of the series might overlap others depending on their position in the data Array.

Pie charts and Doughnut charts cannot be combined with any other chart type.

Notes

You can combine any kind of chart types except for the following two exceptions:

  • Pie and Doughnut cannot be combined with any other type of chart.
  • Bar, Stacked Bar and Stacked Bar 100 cannot be combined with any other type.

Basic Combination Chart

Here is a combination of line and column chart. Try creating other combinations.

Try it Yourself by Editing the Code below.


A chart With 5 dataSeries

Here is another combination chart with two column, one area and two line charts.
In some cases series overlap one another. It should be kept in mind that series are rendered in the order they appear in data array.

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 18

    • sanjai,

      Sorry, as of now it is not possible to combine bar charts with line. But we will consider this for future versions.

  1. Hi, Good Morgning,

    can i have combination of multi column chart with stackedColumn chart together, can i have sample

    • The chart does render when you combine column with stackedColum but they’ll overlap each other – thereby hiding one or the other dataPoint/dataSeries

  2. Hi,

    Is there any way for fix X axis static you say from 1 to 12 but Y axis will be dynamically say from database.

    Please revert me with your valuable feedback.

    Thanks.

    • Amit,

      Yeah, you can implement the same by calling after each update interval

      1) Ajax request on your datatabase for new y values and pushing it to dataPoint.
      2) Remove/pop the first element of dataPoint if dataPoint’s length exceeds 12.
      3) Then Assigning x values from 1 to 12 for the dataPoints.
      4) And finally calling render method of chart will show the chart with updated values.

  3. Hi,

    Is there any option to display barchart,piechart,linechart in the same html page and if so provide me a sample.

    Thanks

    • Anitha,

      Are you looking for this example. Here, you have to pass different container-id corresponding to bar, pie and line chart.

  4. Hi,

    Can you show me an example wherein we can have a bar chart along with a line chart -as in a combination in the same chart itself? I tried it with a number of permutations … but kind of missing the values after 2nd datapoint …
    column + line => works perfectly …
    how can one make
    bar + line => work?

    • Abhi,

      As of now Bar, Stacked Bar and Stacked Bar 100 cannot be combined with any other type. As a workaround you can combine column with line and rotate the div. Here is an example with rotated div.

  5. I have 2 bar line combination. How to give label both bar line? For example first bar line labeled “Source Data A” and second bar line labeld “Source Data B”

    Thanks is advance …

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.