02035736917

To Build the Picasso Combo Chart like below Just follow the below code
<!DOCTYPE html>
<html>
<head>
<title>My picasso.js page</title>
<script src="https://unpkg.com/picasso.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: 400px;
width:400px;
position: relative;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
picasso.chart({
element: document.querySelector('#container'), // This is the element to render the chart in
data: [{
type: 'matrix',
data: [
['Year', 'Month', 'Sales', 'Margin'],
['2010', 'Jan', 8106, 7],
['2010', 'Feb', 5444, 53],
['2010', 'Mar', 4547, 64],
['2010', 'Apr', 7499, 47],
['2010', 'May', 4380, 62],
['2010', 'June', 9735, 13],
['2010', 'July', 7435, 15],
]
}],
settings: {
scales: {
x: {
data: {
field: "Month"
},
padding: 0.2
},
y: {
data: {
field: "Sales"
},
invert: true,
include: [0]
},
y2: {
data: {
field: "Margin"
},
invert: true,
include: [0]
}
},

components: [
{
type: "axis",
scale: "x",
dock: "bottom"
},

{
type: "axis",
scale: "y",
dock: "left"
},
{
type: "axis",
scale: "y2",
dock: "right"
},
{
type: "box",
data: {
extract: {
field: "Month",
props: {
start: 0,
end: { field: "Sales"}
}
}
},
settings: {
major: {
scale: "x"
},
minor: {
scale: "y"
},
box: {
fill: "#ffaa00"
}
}
},
{
type: "line",
data: {
extract: {
field: "Month",
props: {
num: {
field: "Margin"
}
}
}
},
settings: {
coordinates: {
major: {
scale: "x"
},
minor: {
scale: "y2",
ref: "num"
}
},
layers: {
line: {
stroke: "#555555"
},
area: {
fill: "#555555",
opacity: 0.4
},
curve: "monotone"
}
}
}
]
}
});
</script>
</body>
</html>