Toggleable Bar/Line Chart Card with Chart.js

A responsive dashboard chart card built with Chart.js, the most widely used charting library on the web. Includes a Bar/Line toggle that switches the chart type live, a gradient fill for the line view, and Chart.js v4's plugins-based tooltip and legend API. Copy the HTML, CSS and JS below and drop it into any project.

Category

Bootstrap 3.0
img binocular Views: 10
Creation date 2026
Author snippetdeveloperr

Associated Tags

chart.js chartjs dashboard chart bar chart line chart data visualization responsive chart canvas chart vanilla javascript ui component

Related snippets :

fullcalendar with bootstrap
fullcalendar with bootstrap


Clean and Simple HTML Pricing
Clean and Simple HTML Pricing


Toggle Switches Example
Toggle Switches Example


Translucent Circle Profile Design
Translucent Circle Profile Design