search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Charts

    Tailwind CSS Charts and Graphs

    Use responsive charts component with helper examples for simple chart, line chart, bar chart, radar chart, pie chart, doughnut & more. Open source license.


    Line chart

    Line graphs show how a continuous variable changes over time, for example, get trends in sales or profit margins each month, quarter, or year.

    The variable that measures time is plotted on the x-axis. The continuous variable is plotted on the y-axis.

    Line chart
    • HTML
            
                
          <div class="overflow-hidden rounded-lg shadow-lg">
            <div
              class="bg-neutral-50 py-3 px-5 dark:bg-neutral-700 dark:text-neutral-200">
              Line chart
            </div>
            <canvas class="p-10" id="chartLine"></canvas>
          </div>
    
          <!-- Required chart.js -->
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
          <!-- Chart line -->
          <script>
            const labels = ["January", "February", "March", "April", "May", "June"];
            const data = {
              labels: labels,
              datasets: [
                {
                  label: "My First dataset",
                  backgroundColor: "hsl(217, 57%, 51%)",
                  borderColor: "hsl(217, 57%, 51%)",
                  data: [0, 10, 5, 2, 20, 30, 45],
                },
              ],
            };
    
            const configLineChart = {
              type: "line",
              data,
              options: {},
            };
    
            var chartLine = new Chart(
              document.getElementById("chartLine"),
              configLineChart
            );
          </script>
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Bar chart

    A bar chart shows the counts of values for levels of a categorical or nominal variable. A bar graph displays data in a number of bars, each representing a particular category. The height of each bar is proportional to the specified aggregation.

    Bar chart
    • HTML
            
                
          <div class="overflow-hidden rounded-lg shadow-lg">
            <div
              class="bg-neutral-50 py-3 px-5 dark:bg-neutral-700 dark:text-neutral-200">
              Bar chart
            </div>
            <canvas class="p-10" id="chartBar"></canvas>
          </div>
    
          <!-- Required chart.js -->
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
          <!-- Chart bar -->
          <script>
            const labelsBarChart = [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
            ];
            const dataBarChart = {
              labels: labelsBarChart,
              datasets: [
                {
                  label: "My First dataset",
                  backgroundColor: "hsl(217, 57%, 51%)",
                  borderColor: "hsl(217, 57%, 51%)",
                  data: [0, 10, 5, 2, 20, 30, 45],
                },
              ],
            };
    
            const configBarChart = {
              type: "bar",
              data: dataBarChart,
              options: {},
            };
    
            var chartBar = new Chart(
              document.getElementById("chartBar"),
              configBarChart
            );
          </script>
          
            
        

    Radar chart

    Radar charts are a way to show multiple data points and the variation between them. This is useful for comparing points from two or more different data sets.

    Radar chart
    • HTML
            
                
          <div class="overflow-hidden rounded-lg shadow-lg">
            <div
              class="bg-neutral-50 py-3 px-5 dark:bg-neutral-700 dark:text-neutral-200">
              Radar chart
            </div>
            <canvas class="p-10" id="chartRadar"></canvas>
          </div>
    
          <!-- Required chart.js -->
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
          <!-- Chart radar -->
          <script>
            const dataRadar = {
              labels: [
                "Eating",
                "Drinking",
                "Sleeping",
                "Designing",
                "Coding",
                "Cycling",
                "Running",
              ],
              datasets: [
                {
                  label: "My First Dataset",
                  data: [65, 59, 90, 81, 56, 55, 40],
                  fill: true,
                  backgroundColor: "rgba(133, 105, 241, 0.2)",
                  borderColor: "rgb(133, 105, 241)",
                  pointBackgroundColor: "rgb(133, 105, 241)",
                  pointBorderColor: "#fff",
                  pointHoverBackgroundColor: "#fff",
                  pointHoverBorderColor: "rgb(133, 105, 241)",
                },
                {
                  label: "My Second Dataset",
                  data: [28, 48, 40, 19, 96, 27, 100],
                  fill: true,
                  backgroundColor: "rgba(54, 162, 235, 0.2)",
                  borderColor: "rgb(54, 162, 235)",
                  pointBackgroundColor: "rgb(54, 162, 235)",
                  pointBorderColor: "#fff",
                  pointHoverBackgroundColor: "#fff",
                  pointHoverBorderColor: "rgb(54, 162, 235)",
                },
              ],
            };
    
            const configRadarChart = {
              type: "radar",
              data: dataRadar,
              options: {},
            };
    
            var chartBar = new Chart(
              document.getElementById("chartRadar"),
              configRadarChart
            );
          </script>
          
            
        

    Pie chart

    A pie chart shows the relationships of parts to the whole for a variable. Pie charts help you understand the parts-to-a-whole relationship.

    Pie chart
    • HTML
            
                
          <div class="overflow-hidden rounded-lg shadow-lg">
            <div
              class="bg-neutral-50 py-3 px-5 dark:bg-neutral-700 dark:text-neutral-200">
              Pie chart
            </div>
            <canvas class="p-10" id="chartPie"></canvas>
          </div>
    
          <!-- Required chart.js -->
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
          <!-- Chart pie -->
          <script>
            const dataPie = {
              labels: ["JavaScript", "Python", "Ruby"],
              datasets: [
                {
                  label: "My First Dataset",
                  data: [300, 50, 100],
                  backgroundColor: [
                    "rgb(133, 105, 241)",
                    "rgb(164, 101, 241)",
                    "rgb(101, 143, 241)",
                  ],
                  hoverOffset: 4,
                },
              ],
            };
    
            const configPie = {
              type: "pie",
              data: dataPie,
              options: {},
            };
    
            var chartBar = new Chart(
              document.getElementById("chartPie"),
              configPie
            );
          </script>
          
            
        

    Doughnut chart

    Doughnut chart is a circular graphic which is used to show the proportions of categorical data, with the size of each piece representing the proportion of each category.

    Doughnut chart
    • HTML
            
                
          <div class="overflow-hidden rounded-lg shadow-lg">
            <div
              class="bg-neutral-50 py-3 px-5 dark:bg-neutral-700 dark:text-neutral-200">
              Doughnut chart
            </div>
            <canvas class="p-10" id="chartDoughnut"></canvas>
          </div>
    
          <!-- Required chart.js -->
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
          <!-- Chart doughnut -->
          <script>
            const dataDoughnut = {
              labels: ["JavaScript", "Python", "Ruby"],
              datasets: [
                {
                  label: "My First Dataset",
                  data: [300, 50, 100],
                  backgroundColor: [
                    "rgb(133, 105, 241)",
                    "rgb(164, 101, 241)",
                    "rgb(101, 143, 241)",
                  ],
                  hoverOffset: 4,
                },
              ],
            };
    
            const configDoughnut = {
              type: "doughnut",
              data: dataDoughnut,
              options: {},
            };
    
            var chartBar = new Chart(
              document.getElementById("chartDoughnut"),
              configDoughnut
            );
          </script>
          
            
        

    Related resources

    Popover Tooltip Bootstrap Charts Tutorial

    If you are looking for more advanced options, try Bootstrap Charts from MDBootstrap.

    • Line chart
    • Bar chart
    • Radar chart
    • Pie chart
    • Doughnut chart
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com