search results:

    License Free hosting Learn Playground Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • 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
    • ResourcesNew
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
    • Overview
    • API

    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.

    Required ES init: Chart *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

    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
            
                
          <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 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

    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
            
                
          <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
            
                
          <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
            
                
          <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
            
                
          <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
            
                
          <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
            
                
          <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
            
                
          <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
            
                
          <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
            
                
          <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
          );
          
            
        

    Bar chart with custom tooltip

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

    • HTML
    • javascript
    • 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
    • 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
            
                
          <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
          );
          
            
        

    Related resources

    Popover Tooltip Bootstrap Charts Tutorial

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

    • 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

    Charts - API


    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
            
                
            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
            
                
            <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

    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(mode?) method. In this method passing data is required, second argument is optional. myChart.update(data, config)
    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
            
                
            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']
              }
            };
            
            
        
    • Import
    • Usage
    • Options
    • Line chart
    • Bar chart
    • Radar chart
    • Doughnut & Pie
    • Polar chart
    • Bubble chart
    • Scatter chart
    • Legend
    • Legend label
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com