Tailwind CSS Charts and Graphs

Bar chart

You can initialize simple charts with data-te-attributes - it doesn't require any additional JS code.

Note: This method allows only one dataset - more complicated charts require JavaScript initialization.

Via data-te-attributes:

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="bar"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

The same effect achieved via Javascript initialization:

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="bar-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataBar = {
        type: 'bar',
        data: {
          labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
            },
          ],
        },
      };

      new Chart(document.getElementById('bar-chart'), dataBar);

        
            
      // Chart
      const dataBar = {
        type: 'bar',
        data: {
          labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
            },
          ],
        },
      };

      new te.Chart(document.getElementById('bar-chart'), dataBar);

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

Line chart

To use our minimalistic line chart, set the type option to line.

Via data-te-attributes:

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="line"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

The same effect achieved via Javascript initialization:

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="line-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataLine = {
        type: 'line',
        data: {
          labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
            },
          ],
        },
      };
      
      new Chart(document.getElementById('line-chart'), dataLine);

        
            
      // Chart
      const dataLine = {
        type: 'line',
        data: {
          labels: ['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
            },
          ],
        },
      };
      
      new te.Chart(document.getElementById('line-chart'), dataLine);

Bar chart horizontal

Change the orientation of your bar chart from vertical to horizontal by setting the indexAxis option to 'y'.

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="bar-chart-horizontal"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataBarHorizontal = {
        type: "bar",
        data: {
          labels: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
          ],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 65, 40],
            },
          ],
        },
      };
    
      const optionsBarHorizontal = {
        options: {
          indexAxis: "y",
          scales: {
            x: {
              stacked: true,
              grid: {
                display: true,
                borderDash: [2],
                zeroLineColor: "rgba(0,0,0,0)",
                zeroLineBorderDash: [2],
                zeroLineBorderDashOffset: [2],
              },
              ticks: {
                color: "rgba(0,0,0, 0.5)",
              },
            },
            y: {
              stacked: true,
              grid: {
                display: false,
              },
              ticks: {
                color: "rgba(0,0,0, 0.5)",
              },
            },
          },
        },
      };
    
      new Chart(
        document.getElementById("bar-chart-horizontal"),
        dataBarHorizontal,
        optionsBarHorizontal
      );

        
            
      // Chart
      const dataBarHorizontal = {
        type: "bar",
        data: {
          labels: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
          ],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 65, 40],
            },
          ],
        },
      };
    
      const optionsBarHorizontal = {
        options: {
          indexAxis: "y",
          scales: {
            x: {
              stacked: true,
              grid: {
                display: true,
                borderDash: [2],
                zeroLineColor: "rgba(0,0,0,0)",
                zeroLineBorderDash: [2],
                zeroLineBorderDashOffset: [2],
              },
              ticks: {
                color: "rgba(0,0,0, 0.5)",
              },
            },
            y: {
              stacked: true,
              grid: {
                display: false,
              },
              ticks: {
                color: "rgba(0,0,0, 0.5)",
              },
            },
          },
        },
      };
    
      new te.Chart(
        document.getElementById("bar-chart-horizontal"),
        dataBarHorizontal,
        optionsBarHorizontal
      );

Pie chart

A chart with the type pie splits the circle into several pieces to represent a dataset's values as an area's percentage.

Via data-te-attributes:

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="pie"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
          data-te-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

The same effect achieved via Javascript initialization:

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="pie-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataPie = {
        type: 'pie',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
              backgroundColor: [
                'rgba(63, 81, 181, 0.5)',
                'rgba(77, 182, 172, 0.5)',
                'rgba(66, 133, 244, 0.5)',
                'rgba(156, 39, 176, 0.5)',
                'rgba(233, 30, 99, 0.5)',
                'rgba(66, 73, 244, 0.4)',
                'rgba(66, 133, 244, 0.2)',
              ],
            },
          ],
        },
      };
      
      new Chart(document.getElementById('pie-chart'), dataPie);

        
            
      // Chart
      const dataPie = {
        type: 'pie',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
              backgroundColor: [
                'rgba(63, 81, 181, 0.5)',
                'rgba(77, 182, 172, 0.5)',
                'rgba(66, 133, 244, 0.5)',
                'rgba(156, 39, 176, 0.5)',
                'rgba(233, 30, 99, 0.5)',
                'rgba(66, 73, 244, 0.4)',
                'rgba(66, 133, 244, 0.2)',
              ],
            },
          ],
        },
      };
      
      new te.Chart(document.getElementById('pie-chart'), dataPie);

Doughnut chart

Another type of graph representing data as an area's percentage is a doughnut chart.

Via data-te-attributes:

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="doughnut"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
          data-te-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

The same effect achieved via Javascript initialization:

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="doughnut-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataDoughnut = {
        type: 'doughnut',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
              backgroundColor: [
                'rgba(63, 81, 181, 0.5)',
                'rgba(77, 182, 172, 0.5)',
                'rgba(66, 133, 244, 0.5)',
                'rgba(156, 39, 176, 0.5)',
                'rgba(233, 30, 99, 0.5)',
                'rgba(66, 73, 244, 0.4)',
                'rgba(66, 133, 244, 0.2)',
              ],
            },
          ],
        },
      };
      
      new Chart(document.getElementById('doughnut-chart'), dataDoughnut);

        
            
      // Chart
      const dataDoughnut = {
        type: 'doughnut',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
              backgroundColor: [
                'rgba(63, 81, 181, 0.5)',
                'rgba(77, 182, 172, 0.5)',
                'rgba(66, 133, 244, 0.5)',
                'rgba(156, 39, 176, 0.5)',
                'rgba(233, 30, 99, 0.5)',
                'rgba(66, 73, 244, 0.4)',
                'rgba(66, 133, 244, 0.2)',
              ],
            },
          ],
        },
      };
      
      new te.Chart(document.getElementById('doughnut-chart'), dataDoughnut);

Polar chart

Polar area graph will split the circle into pieces with equal angles and different radius.

Via data-te-attributes:

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="polarArea"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
          data-te-dataset-background-color="['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)', 'rgba(156, 39, 176, 0.5)', 'rgba(233, 30, 99, 0.5)', 'rgba(66, 73, 244, 0.4)', 'rgba(66, 133, 244, 0.2)']">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

The same effect achieved via Javascript initialization:

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="polar-area-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataPolar = {
        type: 'polarArea',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
              backgroundColor: [
                'rgba(63, 81, 181, 0.5)',
                'rgba(77, 182, 172, 0.5)',
                'rgba(66, 133, 244, 0.5)',
                'rgba(156, 39, 176, 0.5)',
                'rgba(233, 30, 99, 0.5)',
                'rgba(66, 73, 244, 0.4)',
                'rgba(66, 133, 244, 0.2)',
              ],
            },
          ],
        },
      };
      
      new Chart(document.getElementById('polar-area-chart'), dataPolar);

        
            
      // Chart
      const dataPolar = {
        type: 'polarArea',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
              backgroundColor: [
                'rgba(63, 81, 181, 0.5)',
                'rgba(77, 182, 172, 0.5)',
                'rgba(66, 133, 244, 0.5)',
                'rgba(156, 39, 176, 0.5)',
                'rgba(233, 30, 99, 0.5)',
                'rgba(66, 73, 244, 0.4)',
                'rgba(66, 133, 244, 0.2)',
              ],
            },
          ],
        },
      };
      
      new te.Chart(document.getElementById('polar-area-chart'), dataPolar);

Radar chart

This type of chart will enclose the area based on a dataset's values.

Via data-te-attributes:

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="radar"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

The same effect achieved via Javascript initialization:

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="radar-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataRadar = {
        type: 'radar',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
            },
          ],
        },
      };
      
      new Chart(document.getElementById('radar-chart'), dataRadar);

        
            
      // Chart
      const dataRadar = {
        type: 'radar',
        data: {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],
          datasets: [
            {
              label: 'Traffic',
              data: [2112, 2343, 2545, 3423, 2365, 1985, 987],
            },
          ],
        },
      };
      
      new te.Chart(document.getElementById('radar-chart'), dataRadar);

Bubble chart

This graph visualizes data in a series of "bubbles" with customized coordinates and radius.

Note: As mentioned before, charts with more than 1 dataset be used via data-te-attributes. All more complicated structures require initialization via JavaScript.

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="bubble-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataBubble = {
        type: "bubble",
        data: {
          datasets: [
            {
              label: "John",
              data: [
                {
                  x: 3,
                  y: 7,
                  r: 10,
                },
              ],
            },
            {
              label: "Peter",
              data: [
                {
                  x: 5,
                  y: 7,
                  r: 10,
                },
              ],
              backgroundColor: "rgba(66, 133, 244, 0.2)",
            },
            {
              label: "Donald",
              data: [
                {
                  x: 7,
                  y: 7,
                  r: 10,
                },
              ],
              backgroundColor: "rgba(66, 133, 244, 0.8)",
            },
          ],
        },
      };
    
      new Chart(document.getElementById("bubble-chart"), dataBubble);

        
            
      // Chart
      const dataBubble = {
        type: "bubble",
        data: {
          datasets: [
            {
              label: "John",
              data: [
                {
                  x: 3,
                  y: 7,
                  r: 10,
                },
              ],
            },
            {
              label: "Peter",
              data: [
                {
                  x: 5,
                  y: 7,
                  r: 10,
                },
              ],
              backgroundColor: "rgba(66, 133, 244, 0.2)",
            },
            {
              label: "Donald",
              data: [
                {
                  x: 7,
                  y: 7,
                  r: 10,
                },
              ],
              backgroundColor: "rgba(66, 133, 244, 0.8)",
            },
          ],
        },
      };
    
      new te.Chart(document.getElementById("bubble-chart"), dataBubble);

Scatter chart

Use this chart to represent your data as a series of points with x and y coordinates.

Note: This chart also requires initialization via JavaScript. Initialization via data-te-attributes is not possible.

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="scatter-chart"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      // Chart
      const dataScatter = {
        type: "scatter",
        data: {
          datasets: [
            {
              borderColor: "#4285F4",
              backgroundColor: "rgba(66, 133, 244, 0.5)",
              label: "V(node2)",
              data: [
                {
                  x: 1,
                  y: -1.711e-2,
                },
                {
                  x: 1.26,
                  y: -2.708e-2,
                },
                {
                  x: 1.58,
                  y: -4.285e-2,
                },
                {
                  x: 2.0,
                  y: -6.772e-2,
                },
                {
                  x: 2.51,
                  y: -1.068e-1,
                },
                {
                  x: 3.16,
                  y: -1.681e-1,
                },
                {
                  x: 3.98,
                  y: -2.635e-1,
                },
                {
                  x: 5.01,
                  y: -4.106e-1,
                },
                {
                  x: 6.31,
                  y: -6.339e-1,
                },
                {
                  x: 7.94,
                  y: -9.659e-1,
                },
                {
                  x: 10.0,
                  y: -1.445,
                },
                {
                  x: 12.6,
                  y: -2.11,
                },
                {
                  x: 15.8,
                  y: -2.992,
                },
                {
                  x: 20.0,
                  y: -4.102,
                },
                {
                  x: 25.1,
                  y: -5.429,
                },
                {
                  x: 31.6,
                  y: -6.944,
                },
                {
                  x: 39.8,
                  y: -8.607,
                },
                {
                  x: 50.1,
                  y: -1.038e1,
                },
                {
                  x: 63.1,
                  y: -1.223e1,
                },
                {
                  x: 79.4,
                  y: -1.413e1,
                },
                {
                  x: 100.0,
                  y: -1.607e1,
                },
                {
                  x: 126,
                  y: -1.803e1,
                },
                {
                  x: 158,
                  y: -2e1,
                },
                {
                  x: 200,
                  y: -2.199e1,
                },
                {
                  x: 251,
                  y: -2.398e1,
                },
                {
                  x: 316,
                  y: -2.597e1,
                },
                {
                  x: 398,
                  y: -2.797e1,
                },
                {
                  x: 501,
                  y: -2.996e1,
                },
                {
                  x: 631,
                  y: -3.196e1,
                },
                {
                  x: 794,
                  y: -3.396e1,
                },
                {
                  x: 1000,
                  y: -3.596e1,
                },
              ],
            },
          ],
        },
      };
    
      const optionsScatter = {
        options: {
          title: {
            display: true,
            text: "Scatter Chart - Logarithmic X-Axis",
          },
          scales: {
            x: {
              type: "logarithmic",
              position: "bottom",
              scaleLabel: {
                labelString: "Frequency",
                display: true,
              },
            },
            y: {
              type: "linear",
              scaleLabel: {
                labelString: "Voltage",
                display: true,
              },
            },
          },
        },
      };
    
      new Chart(
        document.getElementById("scatter-chart"),
        dataScatter,
        optionsScatter
      );

        
            
      // Chart
      const dataScatter = {
        type: "scatter",
        data: {
          datasets: [
            {
              borderColor: "#4285F4",
              backgroundColor: "rgba(66, 133, 244, 0.5)",
              label: "V(node2)",
              data: [
                {
                  x: 1,
                  y: -1.711e-2,
                },
                {
                  x: 1.26,
                  y: -2.708e-2,
                },
                {
                  x: 1.58,
                  y: -4.285e-2,
                },
                {
                  x: 2.0,
                  y: -6.772e-2,
                },
                {
                  x: 2.51,
                  y: -1.068e-1,
                },
                {
                  x: 3.16,
                  y: -1.681e-1,
                },
                {
                  x: 3.98,
                  y: -2.635e-1,
                },
                {
                  x: 5.01,
                  y: -4.106e-1,
                },
                {
                  x: 6.31,
                  y: -6.339e-1,
                },
                {
                  x: 7.94,
                  y: -9.659e-1,
                },
                {
                  x: 10.0,
                  y: -1.445,
                },
                {
                  x: 12.6,
                  y: -2.11,
                },
                {
                  x: 15.8,
                  y: -2.992,
                },
                {
                  x: 20.0,
                  y: -4.102,
                },
                {
                  x: 25.1,
                  y: -5.429,
                },
                {
                  x: 31.6,
                  y: -6.944,
                },
                {
                  x: 39.8,
                  y: -8.607,
                },
                {
                  x: 50.1,
                  y: -1.038e1,
                },
                {
                  x: 63.1,
                  y: -1.223e1,
                },
                {
                  x: 79.4,
                  y: -1.413e1,
                },
                {
                  x: 100.0,
                  y: -1.607e1,
                },
                {
                  x: 126,
                  y: -1.803e1,
                },
                {
                  x: 158,
                  y: -2e1,
                },
                {
                  x: 200,
                  y: -2.199e1,
                },
                {
                  x: 251,
                  y: -2.398e1,
                },
                {
                  x: 316,
                  y: -2.597e1,
                },
                {
                  x: 398,
                  y: -2.797e1,
                },
                {
                  x: 501,
                  y: -2.996e1,
                },
                {
                  x: 631,
                  y: -3.196e1,
                },
                {
                  x: 794,
                  y: -3.396e1,
                },
                {
                  x: 1000,
                  y: -3.596e1,
                },
              ],
            },
          ],
        },
      };
    
      const optionsScatter = {
        options: {
          title: {
            display: true,
            text: "Scatter Chart - Logarithmic X-Axis",
          },
          scales: {
            x: {
              type: "logarithmic",
              position: "bottom",
              scaleLabel: {
                labelString: "Frequency",
                display: true,
              },
            },
            y: {
              type: "linear",
              scaleLabel: {
                labelString: "Voltage",
                display: true,
              },
            },
          },
        },
      };
    
      new te.Chart(
        document.getElementById("scatter-chart"),
        dataScatter,
        optionsScatter
      );

Bar chart with custom options

TE provides default options for each chart - you can easily change that by passing an object with your custom options to the Chart constructor.

Note: Read API tab to learn more about available options.

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="bar-chart-custom-options"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      const dataBarCustomOptions = {
        type: "bar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June"],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 6],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)",
              ],
              borderColor: [
                "rgba(255,99,132,1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)",
              ],
              borderWidth: 1,
            },
          ],
        },
      };
    
      const optionsBarCustomOptions = {
        options: {
          plugins: {
            legend: {
              position: "top",
              labels: {
                color: "green",
              },
            },
          },
          scales: {
            x: {
              ticks: {
                color: "#4285F4",
              },
            },
            y: {
              ticks: {
                color: "#f44242",
              },
            },
          },
        },
      };
    
      new Chart(
        document.getElementById("bar-chart-custom-options"),
        dataBarCustomOptions,
        optionsBarCustomOptions
      );

        
            
      const dataBarCustomOptions = {
        type: "bar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June"],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 6],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)",
              ],
              borderColor: [
                "rgba(255,99,132,1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)",
              ],
              borderWidth: 1,
            },
          ],
        },
      };
    
      const optionsBarCustomOptions = {
        options: {
          plugins: {
            legend: {
              position: "top",
              labels: {
                color: "green",
              },
            },
          },
          scales: {
            x: {
              ticks: {
                color: "#4285F4",
              },
            },
            y: {
              ticks: {
                color: "#f44242",
              },
            },
          },
        },
      };
    
      new te.Chart(
        document.getElementById("bar-chart-custom-options"),
        dataBarCustomOptions,
        optionsBarCustomOptions
      );

Set custom text format inside a tooltip by using plugins option.

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="bar-chart-custom-tooltip"></canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

      const dataBarCustomTooltip = {
        type: "bar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 65, 40],
            },
          ],
        },
      };
    
      const optionsBarCustomTooltip = {
        options: {
          plugins: {
            tooltip: {
              callbacks: {
                label: function (context) {
                  let label = context.dataset.label || "";
                  label = `${label}: ${context.formattedValue} users`;
                  return label;
                },
              },
            },
          },
        },
      };
    
      new Chart(
        document.getElementById("bar-chart-custom-tooltip"),
        dataBarCustomTooltip,
        optionsBarCustomTooltip
      );

        
            
      const dataBarCustomTooltip = {
        type: "bar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 65, 40],
            },
          ],
        },
      };
    
      const optionsBarCustomTooltip = {
        options: {
          plugins: {
            tooltip: {
              callbacks: {
                label: function (context) {
                  let label = context.dataset.label || "";
                  label = `${label}: ${context.formattedValue} users`;
                  return label;
                },
              },
            },
          },
        },
      };
    
      new te.Chart(
        document.getElementById("bar-chart-custom-tooltip"),
        dataBarCustomTooltip,
        optionsBarCustomTooltip
      );

Bar chart with darkmode customization

You can change some of the dark mode colors with data data-te-attributes.

Use some of the attributes bellow to change charts dark mode

data-te-dark-ticks-color - change darkmode ticks color from white to other (string)
data-te-dark-label-color - change darkmode label color from white to other (string)
data-te-dark-grid-lines-color - change darkmode grid lines color from #555 to other (string)
data-te-dark-bg-color - change darkmode background color from #262626 to the one you are using (string). Use with radial charts.
data-te-darkmode-off - removes darkmode color change
data-te-dark-mode - allows to change the dark mode on init

HTML
javascript

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas
          data-te-chart="bar"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"
          data-te-dark-ticks-color="#ff0000"
          data-te-dark-grid-lines-color="#ffff00"
          data-te-dark-label-color="#ff00ff">
        </canvas>
      </div>

        
            
      // Initialization for ES Users
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });

Bar chart with darkmode customization (with JS)

You can also change the darkmode appearance with JavaScript

Note: Pass darkmode options object as a fourth parameter.

HTML
javascript
umd

ES UMD

        
            
      <div class="mx-auto w-3/5 overflow-hidden">
        <canvas id="darkmode-customization"> </canvas>
      </div>

        
            
      import {
        Chart,
        initTE,
      } from "tw-elements";
      
      initTE({ Chart });
      
      const dataBarDarkMode = {
        type: "bar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 65, 40],
            },
          ],
        },
      };
    
      const optionsDarkMode = {
        options: {
          scales: {
            y: {
              ticks: {
                color: "rgb(100,50,200)",
              },
              grid: {
                display: false,
              },
            },
            x: {
              ticks: {
                color: "yellow",
              },
            },
          },
          plugins: {
            legend: {
              labels: {
                color: "green",
              },
            },
          },
        }
      };
    
      new Chart(
        document.getElementById("darkmode-customization"),
        dataBarDarkMode,
        {},
        optionsDarkMode
      );

        
            
      const dataBarDarkMode = {
        type: "bar",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Traffic",
              data: [30, 15, 62, 65, 61, 65, 40],
            },
          ],
        },
      };
    
      const optionsDarkMode = {
        options: {
          scales: {
            y: {
              ticks: {
                color: "rgb(100,50,200)",
              },
              grid: {
                display: false,
              },
            },
            x: {
              ticks: {
                color: "yellow",
              },
            },
          },
          plugins: {
            legend: {
              labels: {
                color: "green",
              },
            },
          },
        }
      };
    
      new te.Chart(
        document.getElementById("darkmode-customization"),
        dataBarDarkMode,
        {},
        optionsDarkMode
      );

Import

Importing components depends on how your application works. If you intend to use the Tailwind Elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Chart, initTE } from "tw-elements";
        initTE({ Chart });

        
            
        import "tw-elements";

Usage

Via data attributes

You can initialize a simple chart without using additional JavaScript code - just set data-te-chart to a selected chart's type (f.e. 'line', 'bar'). For ES format, you must first import and call the initTE method.

Note: Scatter and bubble charts has to be initialized with JavaScript.

Name	Type	Description
`data-te-chart`	String	Attribute responsible for initialization and defining a type.
`data-te-labels`	String	Labels for x-axis
`data-te-dataset-label`	String	Label values for datasets
`data-te-dataset-background-color`	Color[ ]	A single color or an array of colors for datasets
`data-te-dataset-border-color`	Color[ ]	A single border or line color or an array of border colors for datasets
`data-te-dataset-border-width`	Number[ ]	Single border thickness or a border thickness table for datasets
`data-te-dataset-data`	Number[ ]	Value sets for charts

HTML

        
            
        <canvas
          data-te-chart="bar"
          data-te-dataset-label="Traffic"
          data-te-labels="['Monday', 'Tuesday' , 'Wednesday' , 'Thursday' , 'Friday' , 'Saturday' , 'Sunday ']"
          data-te-dataset-data="[2112, 2343, 2545, 3423, 2365, 1985, 987]"></canvas>

Via JavaScript

When using the Chart constructor to initialize an instance, you can specify four parameters. The first argument is a wrapper element for a chart, second is a data object with necessary information about displayed datasets. The third are options - each Chart has its default settings provided by the component, so this parameter is optional. The last (fourth) are darkmode options - change colors if the dark mode is enabled. This parameter is also optional since it has some default values.

HTML
javascript
umd

ES UMD

        
            
        <canvas id="bar-chart"></canvas>

        
            
        // Bar chart
        const dataBar = {
          type: 'bar',
          data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                label: 'Traffic',
                data: [30, 15, 62, 65, 61, 65, 40],
              },
            ],
          },
        };
        
        new Chart(document.getElementById('bar-chart'), dataBar);

        
            
        // Bar chart
        const dataBar = {
          type: 'bar',
          data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                label: 'Traffic',
                data: [30, 15, 62, 65, 61, 65, 40],
              },
            ],
          },
        };
        
        new te.Chart(document.getElementById('bar-chart'), dataBar);

Options

Darkmode options

Those options allows to change the default darkmode settings. You can use them with data attributes aswell, for example: data-te-dark-ticks-color="#f00"

Name	Type	Default	Description
`darkTicksColor`	String	`"#fff"`	Color for ticks in dark mode
`darkLabelColor`	String	`"#fff"`	Color for label in dark mode
`darkGridLinesColor`	String	`"#555"`	Color for grid lines in dark mode
`darkmodeOff`	string / null	`"undefined"`	Add only when you want to turn off darkmode. Example: simply add: `data-te-darkmode-off>` to the canvas element or `darkmodeOff: null"` via JS
`darkMode`	"dark" \| "light" \| null	`null`	Set the darkmode value on init. By default it's set to null, so the mode will depend on the localStorage and `.dark` class in HTML element
`darkBgColorLight`	string	`"#fff"`	Default background color charts in lightmode
`darkBgColor`	string	`"#262626"`	Default background color charts

Line options

The line chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.

Name	Type	Description
`label`	String	The label for the dataset that appears in the legend and tooltips.
`xAxisID`	String	The ID of the x-axis to plot this dataset on. If not specified, this defaults to the ID of the first found x-axis
`yAxisID`	String	The ID of the y-axis to plot this dataset on. If not specified, this defaults to the ID of the first found y-axis.
`backgroundColor`	Color	The fill color under the line.
`borderColor`	Color	The color of the line.
`borderWidth`	Number	The width of the line in pixels.
`borderDash`	Number	The length and spacing of dashes.
`borderDashOffset`	Number	Offset for line dashes.
`borderCapStyle`	String	Cap style of the line.
`borderJoinStyle`	String	Line joint style.
`cubicInterpolationMode`	String	The algorithm used to interpolate a smooth curve from the discrete data points.
`fill`	Boolean/String	How to fill the area under the line.
`lineTension`	Number	Bezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.
`pointBackgroundColor`	Color/Color[ ]	The fill color for points.
`pointBorderColor`	Color/Color[ ]	The border color for points.
`pointBorderWidth`	Number/Number[ ]	The width of the point border in pixels.
`pointRadius`	Number/Number[ ]	The radius of the point shape. If set to 0, the point is not rendered.
`pointStyle`	String/String[ ]/Image/Image[ ]	Style of the point.
`pointRotation`	Number/Number[ ]	The rotation of the point in degrees.
`pointHitRadius`	Number/Number[ ]	The pixel size of the non-displayed point that reacts to mouse events.
`pointHoverBackgroundColor`	Color/Color[ ]	Point background color when hovered.
`pointHoverBorderColor`	Color/Color[ ]	Point border color when hovered.
`pointHoverBorderWidth`	Number/Number[ ]	The border width of a point when hovered over.
`pointHoverRadius`	Number/Number[ ]	The radius of the point when hovered over.
`showLine`	Boolean	If false, the line is not drawn for this dataset.
`spanGaps`	Boolean	If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line
`steppedLine`	Boolean/String	If the line is shown as a stepped line.

Bar options

The bar chart allows specifying several properties for each dataset. Besides, some of them can be defined as an array - this way the first value applies to the first bar, the second to the second bar, etc.

Name	Type	Description
`label`	String	The label for the dataset which appears in the legend and tooltips.
`xAxisID`	String	The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
`yAxisID`	String	The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
`backgroundColor`	Color/Color[ ]	The fill color of the bar.
`borderColor`	Color/Color[ ]	The color of the bar border.
`borderWidth`	Number/Number[ ]	The stroke width of the bar in pixels.
`borderSkipped`	String	Which edge to skip drawing the border for.
`hoverBackgroundColor`	Color/Color[ ]	The fill colour of the bars when hovered.
`hoverBorderColor`	Color/Color[ ]	The stroke colour of the bars when hovered.
`hoverBorderWidth`	Number/Number[ ]	The stroke width of the bars when hovered.

Radar chart

The radar chart allows specifying several properties for each dataset. Besides, some of them (f.e. all point* properties) can be defined as an array - this way the first value applies to the first point, the second to the second point, etc.

Name	Type	Description
`label`	String	The label for the dataset which appears in the legend and tooltips.
`backgroundColor`	Color	The fill color under the line.
`borderColor`	Color	The color of the line.
`borderWidth`	Number	The width of the line in pixels.
`borderDash`	Number[ ]	Length and spacing of dashes.
`borderDashOffset`	Number	Offset for line dashes.
`borderCapStyle`	String	Cap style of the line
`borderJoinStyle`	String	Line joint style
`fill`	Boolean/String	How to fill the area under the line.
`lineTension`	Number	Bezier curve tension of the line. Set to 0 to draw straightlines.
`pointBackgroundColor`	Color/Color[ ]	The fill color for points.
`pointBorderColor`	Color/Color[ ]	The border color for points.
`pointBorderWidth`	Number/Number[ ]	The width of the point border in pixels.
`pointRadius`	Number/Number[ ]	The radius of the point shape. If set to 0, the point is not rendered.
`pointRotation`	Number/Number[ ]	The rotation of the point in degrees.
`pointStyle`	String/String[ ]/Image/Image[ ]	Style of the point.
`pointHitRadius`	Number/Number[ ]	The pixel size of the non-displayed point that reacts to mouse events.
`pointHoverBackgroundColor`	Color/Color[ ]	Point background color when hovered.
`pointHoverBorderColor`	Color/Color[ ]	Point border color when hovered.
`pointHoverBorderWidth`	Number/Number[ ]	Border width of point when hovered.
`pointHoverRadius`	Number/Number[ ]	The radius of the point when hovered.

Doughnut and Pie

In Doughnut and Pie charts passing an array of values to an option will apply each of them to a corresponding entry in a dataset.

Name	Type	Description
`backgroundColor`	Color[ ]	The fill color of the arcs in the dataset.
`borderColor`	Color[ ]	The border color of the arcs in the dataset.
`borderWidth`	Number[ ]	The border width of the arcs in the dataset.
`hoverBackgroundColor`	Color[ ]	The fill colour of the arcs when hovered.
`hoverBorderColor`	Color[ ]	The stroke colour of the arcs when hovered.
`hoverBorderWidth`	Number[ ]	The stroke width of the arcs when hovered.

Polar Area chart

Polar area charts are similar to pie charts, but each segment has the same angle and differs in the radius (depending on the value).

Name	Type	Description
`backgroundColor`	Color	The fill color of the arcs in the dataset.
`borderColor`	Color	The border color of the arcs in the dataset.
`borderWidth`	number	The border width of the arcs in the dataset.
`hoverBackgroundColor`	Color	The fill colour of the arcs when hovered.
`hoverBorderColor`	Color	The stroke colour of the arcs when hovered.
`hoverBorderWidth`	number	The stroke width of the arcs when hovered.

Bubble chart

A bubble chart displays a series of points with x and y coordinates. The z coordinate determines the size of each bubble.

Name	Type	Description
`backgroundColor`	Color	bubble background color
`borderColor`	Color	bubble border color
`borderWidth`	Number	bubble border width (in pixels)
`hoverBackgroundColor`	Color	bubble background color when hovered
`hoverBorderColor`	Color	bubble border color when hovered
`hoverBorderWidth`	Number	bubble border width when hovered (in pixels)
`hoverRadius`	Number	bubble additional radius when hovered (in pixels)
`hitRadius`	Number	bubble additional radius for hit detection (in pixels).
`label`	String	The label for the dataset which appears in the legend and tooltips.
`order`	Number	The drawing order of dataset.
`pointStyle`	String	bubble shape style.
`rotation`	Number	bubble rotation (in degrees).
`radius`	Number	bubble radius (in pixels).

Scatter chart

Scatter chart displays the dataset as a series of points with z and y coordinates.

Note: The scatter chart supports the same properties as the line chart.

Plugin Legend

Name	Type	Default	Description
`display`	Boolean	true	showing legend
`position`	String	'top'	Position of the legend.
`fullWidth`	Boolean	true	Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
`onClick`	Function		A callback that is called when a click event is registered on a label item
`onHover`	Function		A callback that is called when a 'mousemove' event is registered on top of a label item
`reverse`	Boolean	false	Legend will show datasets in reverse order.
`labels`	Object		See documentation about labels in table below.

Plugin Legend - Label Configuration

Name	Type	Default	Description
`boxWidth`	Number	40	width of coloured box
`font.size`	Number	12	font size of text
`font.style`	String	'normal'	font style of text
`color`	Color	'#666'	Color of text
`font.family`	String	"Roboto"	Font family of legend text.
`padding`	Number	10	Padding between rows of colored boxes
`generateLabels`	Function		Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box.
`filter`	Function	null	Filters legend items out of the legend. Receives 2 parameters, a Legend Item and the chart data.
`usePointStyle`	Boolean	false	Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
`backgroundColor`	Style/Null	Null	Background color of datalabels.

Methods

Asynchronous methods and transitions:
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

Method	Description	Example
`update(data, config)`	Updates chart's data and calls .update method. In this method passing `data` is required, second argument is optional.	`myChart.update(data, config)`
`setTheme(mode)`	Sets the dark or light theme for the chart. Pass `'dark'` or `'light'` as a parameter. This method will work only when the chart is already fully loaded	`myChart.setTheme("dark")`
`dispose`	Removes a te.Chart instance	`myChart.dispose()`
`getInstance`	Static method which allows you to get the chart instance associated to a DOM element.	`Chart.getInstance(chartEl)`
`getOrCreateInstance`	Static method which returns the chart instance associated to a DOM element or create a new one in case it wasn't initialized.	`Chart.getOrCreateInstance(chartEl)`

javascript
umd

ES UMD

        
            
        const instance = new Chart(el, data, options, darkmodeOptions);

        instance.dispose();

        
            
        const instance = new te.Chart(el, data, options, darkmodeOptions);

        instance.dispose();

Events

Event handling in Charts differs from other TE components - in the options parameter you can define which events should be triggered and handlers for some of them (click, hover).

Name	Type	Default	Description
`events`	string[ ]	`['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']`	The `events` option defines the browser events that the chart should listen to for tooltips and hovering.
`onHover`	function	`null`	Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).
`onClick`	function	`null`	Called if the event is of type `'mouseup'` or `'click'`. Called in the context of the chart and passed the event and an array of active elements.

JavaScript

        
            
        const eventOption = {
          options: {
            // This chart will not respond to mousemove, etc
            events: ['click']
          }
        };

Charts

Bar chart

Line chart

Bar chart horizontal

Pie chart

Doughnut chart

Polar chart

Radar chart

Bubble chart

Scatter chart

Bar chart with custom options

Bar chart with custom tooltip

Bar chart with darkmode customization

Bar chart with darkmode customization (with JS)

Charts - API

Import

Usage

Via data attributes

Via JavaScript

Options

Darkmode options

Line options

Bar options

Radar chart

Doughnut and Pie

Polar Area chart

Bubble chart

Scatter chart

Plugin Legend

Plugin Legend - Label Configuration

Methods

Events

Charts

Tailwind CSS Charts and Graphs

Bar chart

Line chart

Bar chart horizontal

Pie chart

Doughnut chart

Polar chart

Radar chart

Bubble chart

Scatter chart

Bar chart with custom options

Bar chart with custom tooltip

Bar chart with darkmode customization

Bar chart with darkmode customization (with JS)

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Charts - API

Import

Usage

Via data attributes

Via JavaScript

Options

Darkmode options

Line options

Bar options

Radar chart

Doughnut and Pie

Polar Area chart

Bubble chart

Scatter chart

Plugin Legend

Plugin Legend - Label Configuration

Methods

Events