Skip to main content

Bar Line Chart

<chart-ease width="500" height="400" margin="25">
<data-set id="redLine">
<path data-drawn-as="edge" stroke="#8F96AC" fill="none" stroke-width="15"></path>
<circle fill="#FF6464" r="15"></circle>
</data-set>
<data-set id="greenLine">
<path data-drawn-as="edge" stroke="#AFB9D2" fill="none" stroke-width="15"></path>
<circle fill="#C3E678" r="15"></circle>
</data-set>
<data-set id="barChart">
<rect fill="#EFF2FA" width="15"></rect>
</data-set>
<left-axis ticks="10" min="0" max="8">
<line axis-line stroke="#C7CFE2" stroke-width="14"></line>
<rect axis-tick fill="#D7DEED" width="30" height="15" rx="10" ry="10"></rect>
</left-axis>
<bottom-axis ticks="8" min="1" max="8">
<line axis-line stroke="#C7CFE2" stroke-width="15"></line>
<rect axis-tick fill="#D7DEED" width="15" height="30" rx="10" ry="10"></rect>
</bottom-axis>
</chart-ease>
const data1 = [6, 4, 1, 3, 5, 1, 2, 3];
const data2 = [2, 3, 5, 1, 1, 2, 6, 5];
const margin = 25;
const barWidth = 15;

const barChart = document.getElementById("barChart");
const redLine = document.getElementById("redLine");
const greenLine = document.getElementById("greenLine");

barChart.ondraw = onBarsDraw;
redLine.ondraw = onLinesDraw;
greenLine.ondraw = onLinesDraw;

barChart.data = data1.concat(data2);
redLine.data = data1;
greenLine.data = data2;

function onBarsDraw({ shape, row }) {
shape.setAttribute("x", row.x - barWidth / 2);
shape.setAttribute("y", margin);
shape.setAttribute("width", barWidth);
shape.setAttribute("height", row.y - margin);
}

function onLinesDraw({ shape, row, index }) {
if (index == 0) shape.setAttribute("fill", "none");
shape.setAttribute("cx", row.x);
shape.setAttribute("cy", row.y);
}

You can use it with live data: