Javascript chart with multiple “chart areas”

Can anyone suggest a Javascript chart library that could produce such chart: Refer this Image

The emphasis here is on two separate areas: history and schedule. Each of them should have a different title and background color. Basically, it would be great if each area is configurable separately.

  • How to create this chart with ZingChart
  • How to use percentage scale with Chart.js
  • Removing legend on charts with chart.js v2
  • Style X and Y Axis (tick mark) with Chart.js?
  • Highcharts - animations other than the default
  • ZingChart does not display all the words in wordcloud
  • I tried Google Charts but did not see how to implement it in a clean way. I could create two charts with a specific layout, but I would prefer a more dynamic and correct way of doing that.

  • how much data can charts js handle
  • Javascript chart click to open new
  • Remove Tooltip in Synchronized Charts, When user leaves the chart area
  • D3.js update bar chart from json
  • Chart Js Change Label orientation on x-Axis for Line Charts
  • Real time data plotting performance HTML5 canvas vs Dom appending
  • 2 Solutions collect form web for “Javascript chart with multiple “chart areas””

    If you’re looking for a charting library to accomplish this, ZingChart would do the trick. By setting “layout” in the graphset object to “x2” and creating two separate chart objects, your charts are set up side-by-side but can still be manipulated individually. I’ve included a demo below for reference. Run it to see the chart.

    You can download the entire library for free on the site. If you have any questions, I’m on the team and happy to help! You can reach us at support@zingchart.com.

    var myChart = {
        "layout":"x2",
        "background-color":"#eee",
        "border-color":"#000",
        "border-width":2,
        "graphset":[
            {
                "type":"bar",
                "background-color":"#eee",
                "width":"60%",
                "x":0,
                "y":0,
                "title":{
                    "text":"Chart 1",
                    "text-align":"left",
                    "font-color":"black",
                    "background-color":"#ddd"
                },
                "scale-x":{
                    "values":["2007","2008","2009","2010","2011","2012","2013","2014"],
                    "label":{
                        "text":"History",
                        "offset-x":-125,
                        "padding-top":10
                    },
                    "tick":{
                        "visible":false
                        },
                    "guide":{
                        "visible":false
                        }
                },
                "scale-y":{
                        "values":"0:12:2",
                        "guide":{
                            "line-style":"solid"
                            }
                    },
                "plot":{
                    "stacked":true
                    },
                "plotarea":{
                    "margin-right":0,
                    "background-color":"#ddd"
                },
                "legend":{
                    "shared":true,
                    "visible":false
                },
                "series":[
                	{
    		        "values":[3,5,5,5,8,6,4,3],
                    "background-color":"#018BD3"
    	            },
    		        {
    			    "values":[null,null,null,null,3,null,null,null],
                    "background-color":"#F27D30"
    	            },
    		        {
    		        "values":[],
                    "background-color":"#F2D134"
    		        },
    	            {
    		        "values":[null,null,null,null,null,2,null,2],
                    "background-color":"#14AE13"
    	            }
    	        ]
            },
            {
                "type":"bar",
                "background-color":"#eee",
                "width":"40%",
                "x":"60%",
                "y":0,
                 "title":{
                    "text":"Chart 2",
                    "text-align":"left",
                    "font-color":"black",
                    "background-color":"#ccc"
                },
                "scale-x":{
                    "values":["2015","2016","2017"],
                    "tick":{
                        "visible":false
                        },
                    "guide":{
                        "visible":false
                        },
                    "label":{
                        "text":"Schedule",
                        "offset-x":-25,
                        "padding-top":10
                    }
                },
                "scale-y":{
                        "values":"0:12:2",
                        "line-color":"#777",
                        "tick":{
                            "visible":false
                            },
                        "item":{
                            "visible":false
                            },
                        "guide":{
                            "line-style":"solid"
                            }
                    },
                "plot":{
                    "stacked":true
                    },
                "plotarea":{
                    "margin-left":0,
                    "margin-right":"50%",
                    "background-color":"#ccc"
                    },
                "legend":{
                    "shared":true
                },
                "series":[
                    {
    		        "values":[7,1,0],
                    "background-color":"#018BD3"
    	            },
    		        {
    			    "values":[],
                    "background-color":"#F27D30"
    	            },
    		        {
    		        "values":[3,6,1],
                    "background-color":"#F2D134"
    		        },
    	            {
    		        "values":[1,null,null],
                    "background-color":"#14AE13"
    	            }
    	        ]
            }
        ]
    };
    
      zingchart.render({
                id : "myChart",
                height : "300px",
                width : "100%",
                data : myChart
            });
    <script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
    <div id="myChart"></div>

    You can try d3Js – examples library.

    The possible solution is you have to define Two graph separately with using <div> tag.

    Give each of them separate CSS values (for colors and your specific needs), And then define both <div> under single division.

    First try to edit JsFiddle