In This article, we will discuss how we can Mixed Bar and Line chart with different scales using Chart.js. First, let you know that it is possible to create a Bar and Line chart mixed chart in Chart js.
A combination chart is very useful for representing the data to the use, combination chart is a visualization that combines the features of multiple graph types in one graph for example we can combine a bar chart and the line chart. using that combination chart show the data using several bars and or lines, each of which represents a particular dataset.
A mix of bars and lines in the same graph can be useful when comparing values in different datasets since the mix provides a clear view of which dataset is high, lower, or equal.
Combo Bar Line Chart with Chart.js Example
Let’s understand with an example using the chart js, let’s I want to create a combination chart to compare the projected sales with the real sales for each month.
Our example below contains two series, in which the bars describe the projected sales for each month in a calendar year, and the line chart describes the real sales for the same months done by our company.
<!DOCTYPE html>
<html>
<head>
<title>Createbar chart with Line Chart Using chart.js</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="barchartwithlinechartcanvas" style="width:80%"></canvas>
</div>
<script>
var BarchartwithlineDataobj = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "Projected sales",
backgroundColor: "red",
borderColor: "red",
borderWidth: 1,
data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125],
order: 1
},
{
label: "Actual Sales",
backgroundColor: "blue",
borderColor: "blue",
borderWidth: 1,
data: [0, 52, 94, 62, 12, 45, 110, 52, 39, 75,115,175],
type: 'line',//sepcify this dataset is for line chart
order: 0 //to set the linechart on top of barchart
}
]
};
var LinebarChartOptions = {
responsive: true,
plugins: {
legend: {
position: 'right',//this option is used for place legend on the right side of bar chart
}
},
title: {
display: true,
text: "Chart.js Bar Chart with Line Chart"
}
}
window.onload = function () {
var chartData = {
type: "bar",
data: BarchartwithlineDataobj,
options: LinebarChartOptions
}
new Chart("barchartwithlinechartcanvas", chartData);
};
</script>
</body>
</html>
Codepen Editor
The post [Simple Trick]-How to Combined Bar and line charts Using Chart.js? appeared first on Software Development | Programming Tutorials.
Read More Articles
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- jQuery Ajax GET Example with Parameters
- How to Pass Parameters in AJAX POST?| JQuery Ajax Post Json Example
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- How to add, edit and delete rows of an HTML table with Jquery?
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- [Solved]-How to Upload pdf file using jquery MVC?
- Dynamically creating graphs with jQuery
- Background-aware text color
- Compound JQuery Selectors
- Coldfusion CFC Return JSON display in Jquery, how do I handle multiple records from CFC and display in Jquery?
- Loading external HTML page with relative paths into a DIV using jQuery
- Setting TD content using javascript/jquery
- ui-tab with Ng-repeat and static tab
- A JavaScript frontend logging system that logs to our backend?
- Converting JSON object to javascript array
- Form with multiple buttons - all are submitting the form
- Change the menu color at one point of one page site
- How to make window size observable using knockout
- Ajax loading for complex projects
- Create Template Dynamically - Meteor
- More Vimeo videos in a single player that autoplays
- How to get tinyMCE content from more than one text area
- Showing actual HTML content in jQuery
- switch between jquery-1.3.2.js and jquery-1.3.2.min.js
- On clicking an element get child hidden input field's value
- jQuery stop HTML5 video when hidden, restart when visibile
- Rendering entity type as text field so I can auto-complete it with jquery
- jQuery UI autocomplete: add a css class to specific items
- How can I get all a form's values that would be submitted without submitting
- Bootstrap Carousel showing next and previous image
- Looping through list items with jQuery
- Using getScript in a main.js file to reduce load size
- Mousewheel scrolling inside container - catching events
- Selecting text on focus using jQuery not working in Safari and Chrome
- SyntaxError: unterminated string literal <script>...</script> tag not working within a string variable
- tooltip on dynamic created content in jquery
- Ajax CSRF 403 forbidden codeigniter
- jquery each() with setInterval
- javascript setTimeout or jquery delay - neither are working for me
- How to force inline-blocked divs to same height
- Populate a Select HTML element from JSON parsed object array
- jQuery SlideDown Flickering in Firefox
- how to hide row with rowspan
- Using jQuery's datastore vs. expando properties
- How to kill a javascript setTimeout loop
- How do I let PHP echo "\n" as plain-text for javascript and not have the "\n" create a new line?
- JQueryUI adding an image in option
- JQuery Mobile Links with MVC
- Prevent form field to be edited without disabling field
- Using jQuery and JSON to populate forms?
- How to update the twitter share button URL with dynamic content?
- Regex to check if password contains at least one capital letter
- jQuery Form Validate() : How to setup default messages?
- I can upload files with jquery ajax and php, some explaination and modification required
- Move table footer to bottom of scrolling div dynamically using jquery
- Jquery dynamically created draggable divs
- How to show Google font preview
- highcharts scatter with 4 quadrants
- How to add Custom button and its functionality in Admin Silverstripe?
- Submitting HTML form in JQuery dialog
- FullCalendar - Only display 'allDay' slot when in agenda view (weekly or daily)
- What is the optimum way to handle broken images?
- How do I use the "highlight" jquery effect without temporarily hiding the background-image?
- Custom the right click menu of elfinder (a jquery file manager plugin)
- Check that element is in DOM or not with jQuery?
- Web service work fine in chrome, but not in firefox and IE
- How many elements does it take for event delegation to become worthwhile?
- jQuery slideToggle menus that collapses sibling menus before opening/closing itself
- Add Image on the Button
- Problem understanding javascript multi-dimension arrays
- jstree contextmenu create file/folder function
- jQuery selectors performance
- Multiple ajax calls when previous one completes
- How to download a file without the "Leave the Page" dialog or any other prompt?
- keep the text in a marquee
- High speed Javascript benchmarking
- Creating Multiple jQuery/Javascript widgets
- FullPage.js - add active class to menu anchor when on a nonematching section
- Javascript .files[0] attribute in jQuery
- How do I use jQuery to filter a table?
- How to change the values of colSpan with toggle buttons
- manually draw a cluster with markerclusterer for maps v3
- How to disable write in a Cell Handsontable and include one dropdown
- Distinguish between automatic browser scroll and user scroll
- HTML5' canvas: $(document).ready(function() - NOT READY
- Fly a Div to another div with fly effect
- How do I get the clicked element with inline HTML onclick and jQuery?
- Scroll to specific row in DataTable
- JQuery 1.7.1 seemingly can't handle HTML5 element IDs
- JQGrid - Cannot call ASP.NET WebMethod but can with Ajax
- How to update the source Option in bootstrap-typeahead.js
- jQuery/JavaScript: Detecting scroll direction - code structure issue
- How to initialize Microsoft Monaco editor in a browser using simple JavaScript or jQuery
- Why does binding "move_node.jstree" only fire once, for the first node, when moving a group of nodes?
- JQuery cycle plugin with different effect on next and previous
- How to create an alphabet shape containing text with html css javascript?
- How to pass a variable by reference to an event handler in JavaScript?
- Removing Query String from URL by using jquery (working with issue)
- DataTables: Generate whole table from JSON
- Jquery UI Datepicker onSelect and onInput events
- How can I get jQuery or Javascript to change css based on the current url?
- How can I use the JSFiddle echo feature with JQuery?
- Calling an MVC Action with JQuery AJAX that doesn't return Json (instead another view)
- How to check whether selected node is having child nodes or not in jstree?
- Capturing Print Event via jQuery
- round slider select
- How to overflow one section of a modal window using CSS
- jquery date picker split into multiple fields
- How to disable tooltip in the browser with jQuery?
- How to accumulate data from various AJAX calls?
- save jquery ui-sortable positions to DB
- Phonegap/cordova IOS Landscape Video
- JQuery pass this to function
- How to validate the form using angularjs when the name field has .(dot) in it?
- Jquery Textbox Disabled... Cannot See the attribute in FormCollection
- jquery validation plugin for dynamic element ID
- jQuery - How to select only images that are wrapped in links?
- Compressing json posted with jquery
- Unknown error on using .ajax() to get JSON
- Executing custom JavaScript on specific pages of the site from a single file
- jQuery animate scrollTop not working in IE 7
- jQuery ajax request cancelled slows the current request
- Why is JQuery unable to parse certain xml nodes?
- Sanitizing user input when creating HTML elements
- Javascript View HTML Toggle
- How to make a div autogrow where contenteditable=true
- Fengyuanchen Cropper: get the cropped image in base64
- Fancytree jQuery plugin - select node
- jQuery width() returns 0
- No file download after AJAX Post in Ember
- javascript prototype - adding a callback
- select2 - Always dropdown and not dropup
- How can I give different color for each letter in a text field?
- jQuery serialize / serializeArray from an element that is not a form
- Geolocation - how to get city from long and lat
- jquery validate either or with validate
- jQuery chaining faster than separate statements?
- jQuery key code for command key
- How to enable Bootstrap table pagination and search?
- Bootstrap-Select and keyboard navigation
- jQuery: Change the border color of ONE table cell
- Internet Explorer adds height- and width-attributes to a newly appended image automatically
- Underscore JS, find object which contains value in array
- Force a user to select from JQuery UI Autocomplete and populate a hidden field after selecting
- .click() fails after dom change
- Angular2 JQuery, how to make the document.ready function
- Only show modal after validation check and form has been submitted
- "position:fixed;bottom:0;" doesn't work in iPhone
- Most efficient way of selecting a set of elements
- In jQuery, $('body') can be selecting the body element, but $('body') can be just like $('some text'), so how to distinguish?
- jquery: how do i know if i have it?
- Script's async property && document.ready?
- how can I refresh the query inside the div
- jQuery:Looping all radio buttons inside an HTML table
- How to stop contentEditable="true" inserting <div> instead of <p> when pressing return?
- jQuery css('padding') - Issue with Firefox
- jquery mobile carousel