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 Reddit Share via StumbleUpon

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>

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

Charts

Line chart

Bar chart

Radar chart

Pie chart

Doughnut chart

Related resources