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, Doughnut, Funnel and Pyrmaid 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 Editing The Code

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 Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

18 Comments

    • Anjali says:

      sanjai,

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

  4. Muhammad MUbusher Aslam says:

    Hi, Good Morgning,

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

    • Sanjoy says:

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

  6. Amit Kumar says:

    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.

    • Sanjoy says:

      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.

  7. Anitha says:

    Hi,

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

    Thanks

    • Sanjoy says:

      Anitha,

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

  8. Abhi says:

    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?

    • Sanjoy says:

      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.

  9. Novarli says:

    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 …

If you have any questions, please feel free to ask in our forums. Ask Question