Category: UI Components

Apache ECharts – Examples

Stacked Bar Chart with Gap – Apache ECharts I created an example to create a gap between stacked bars using Apache ECharts. See the Pen Bar Charts with Two datasets – using Apache ECharts by Puneet Sharma (@webdevpuneet) on CodePen. Donut Chart with Apache...

Custom Range Sliders

UI Components

Here is a custom range slider I created to use gradients in the slided part and the thumb itself. DEMO See the Pen Custom Range Sliders by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div class=”slider”> <span...

Customized Pie Chart – Using Apache Echart

UI Components

Here is a simple example of creating a customized pie chart using the Apache Echart library. DEMO See the Pen Pie Chart Using Echart by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div id=”piechart1″ style=”width:...

Customized Line Area Chart with customized Tooltip – Apache ECharts

UI Components

Here is an example with a demo to create a customized line area chart with gradient and customized x-axis labels with customized tooltips. DEMO See the Pen Line Area Chart – using Apache Charts by Puneet Sharma (@webdevpuneet) on CodePen. CODE HTML <div...

Concentric Doughnut Chart with Chart.js

UI Components

Check the following DEMO and modify it according to your needs. DEMO See the Pen Polar Chart with Chart.js by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div class=”donutPieChart”> <canvas id=”myChart”></canvas>...

Sticky Sidebar

JavaScript, UI Components

Javascript function to make the sidebar sticky to the bottom if the content length is more than the sidebar. Also, check the demo for the same. DEMO See the Pen Sticky Sidebar by Puneet Sharma (@webdevpuneet) on CodePen. JavaScript let vw =...