Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding
AroundUI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Charts

Customizable responsive charts, including: Line, Bar, Pie charts and more.

Around component
Data attributes API

Around added extra layer of data attribute to access the core features of the plugin right in HTML document.

data-chart - to pass in data in JSON format to be displayed in line, bar, pie or other type of chart.

Check the code examples below.

For more features / options visit plugin documentation website:
https://www.chartjs.org/docs/latest/

Line chart

<!-- Line chart: Multiple lines of different color + Legend -->
<canvas data-chart='{
  "type": "line",
  "data": {
    "labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [12, 9, 7, 8, 6, 4, 3, 2, 0],
        "backgroundColor": "rgba(68,140,116,.35)",
        "borderWidth": 2,
        "borderColor": "#448c74",
        "pointBackgroundColor": "#448c74",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(68,140,116,.35)",
        "pointHoverBorderColor": "#448c74",
        "pointHoverBorderWidth": 6
      },
      {
        "label": "Dataset 2",
        "data": [2, 1, 3, 7, 9, 6, 7.7, 4, 7],
        "backgroundColor": "rgba(237,203,80,.35)",
        "borderWidth": 2,
        "borderColor": "#edcb50",
        "pointBackgroundColor": "#edcb50",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(237,203,80,.35)",
        "pointHoverBorderColor": "#edcb50",
        "pointHoverBorderWidth": 6
      },
      {
        "label": "Dataset 2",
        "data": [1, 3, 4, 5, 6, 8, 9, 10, 11],
        "backgroundColor": "rgba(237,80,80,.35)",
        "borderWidth": 2,
        "borderColor": "#ed5050",
        "pointBackgroundColor": "#ed5050",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(237,80,80,.35)",
        "pointHoverBorderColor": "#ed5050",
        "pointHoverBorderWidth": 6
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      },
      "x": {
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>
// Line chart: Multiple lines of different color + Legend
canvas(data-chart=`{
  "type": "line",
  "data": {
    "labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [12, 9, 7, 8, 6, 4, 3, 2, 0],
        "backgroundColor": "rgba(68,140,116,.35)",
        "borderWidth": 2,
        "borderColor": "#448c74",
        "pointBackgroundColor": "#448c74",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(68,140,116,.35)",
        "pointHoverBorderColor": "#448c74",
        "pointHoverBorderWidth": 6
      },
      {
        "label": "Dataset 2",
        "data": [2, 1, 3, 7, 9, 6, 7.7, 4, 7],
        "backgroundColor": "rgba(237,203,80,.35)",
        "borderWidth": 2,
        "borderColor": "#edcb50",
        "pointBackgroundColor": "#edcb50",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(237,203,80,.35)",
        "pointHoverBorderColor": "#edcb50",
        "pointHoverBorderWidth": 6
      },
      {
        "label": "Dataset 2",
        "data": [1, 3, 4, 5, 6, 8, 9, 10, 11],
        "backgroundColor": "rgba(237,80,80,.35)",
        "borderWidth": 2,
        "borderColor": "#ed5050",
        "pointBackgroundColor": "#ed5050",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(237,80,80,.35)",
        "pointHoverBorderColor": "#ed5050",
        "pointHoverBorderWidth": 6
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      },
      "x": {
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}`)

Bar chart

<!-- Bar chart: Multiple bars of different color + Legend -->
<canva data-chart='{
  "type": "bar",
  "data": {
    "labels": ["2017", "2018", "2019", "2020", "2021", "2022"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [12000, 9000, 7000, 8000, 11000, 6000],
        "borderWidth": 2,
        "borderColor": "#448c74",
        "backgroundColor": "rgba(68,140,116,.35)",
        "hoverBackgroundColor": "rgba(68,140,116,.75)"
      },
      {
        "label": "Dataset 2",
        "data": [3500, 5000, 8750, 1300, 3000, 8750],
        "borderWidth": 2,
        "borderColor": "#edcb50",
        "backgroundColor": "rgba(237,203,80,.35)",
        "hoverBackgroundColor": "rgba(237,203,80,.75)"
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      },
      "x": {
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>
// Bar chart: Multiple bars of different color + Legend
canvas(data-chart=`{
  "type": "bar",
  "data": {
    "labels": ["2017", "2018", "2019", "2020", "2021", "2022"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [12000, 9000, 7000, 8000, 11000, 6000],
        "borderWidth": 2,
        "borderColor": "#448c74",
        "backgroundColor": "rgba(68,140,116,.35)",
        "hoverBackgroundColor": "rgba(68,140,116,.75)"
      },
      {
        "label": "Dataset 2",
        "data": [3500, 5000, 8750, 1300, 3000, 8750],
        "borderWidth": 2,
        "borderColor": "#edcb50",
        "backgroundColor": "rgba(237,203,80,.35)",
        "hoverBackgroundColor": "rgba(237,203,80,.75)"
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      },
      "x": {
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}`)

Pie chart

<!-- Pie chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
  "type": "pie",
  "data": {
    "labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
    "datasets": [
      {
        "label": "Value, %",
        "data": [42, 25, 33],
        "borderWidth": 0,
        "backgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ],
        "hoverBackgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": {
        "position": "right",
        "labels": {
          "usePointStyle": true,
          "boxWidth": 12,
          "boxHeight": 12,
          "useBorderRadius": true,
          "borderRadius": 8,
          "padding": 20,
          "font": {
            "family": "'Inter', sans-serif",
            "size": 15
          }
        }
      }
    }
  }
}'></canvas>
// Pie chart: Multiple slices of different color + Legend
canvas(data-chart=`{
  "type": "pie",
  "data": {
    "labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
    "datasets": [
      {
        "label": "Value, %",
        "data": [42, 25, 33],
        "borderWidth": 0,
        "backgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ],
        "hoverBackgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": {
        "position": "right",
        "labels": {
          "usePointStyle": true,
          "boxWidth": 12,
          "boxHeight": 12,
          "useBorderRadius": true,
          "borderRadius": 8,
          "padding": 20,
          "font": {
            "family": "'Inter', sans-serif",
            "size": 15
          }
        }
      }
    }
  }
}`)

Doughnut chart

<!-- Doughnut chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
  "type": "doughnut",
  "data": {
    "labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
    "datasets": [
      {
        "label": "Value, %",
        "data": [42, 25, 33],
        "borderWidth": 0,
        "backgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ],
        "hoverBackgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": {
        "position": "right",
        "labels": {
          "usePointStyle": true,
          "boxWidth": 12,
          "boxHeight": 12,
          "useBorderRadius": true,
          "borderRadius": 8,
          "padding": 20,
          "font": {
            "family": "'Inter', sans-serif",
            "size": 15
          }
        }
      }
    }
  }
}'></canvas>
// Doughnut chart: Multiple slices of different color + Legend
canvas(data-chart=`{
  "type": "doughnut",
  "data": {
    "labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
    "datasets": [
      {
        "label": "Value, %",
        "data": [42, 25, 33],
        "borderWidth": 0,
        "backgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ],
        "hoverBackgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": {
        "position": "right",
        "labels": {
          "usePointStyle": true,
          "boxWidth": 12,
          "boxHeight": 12,
          "useBorderRadius": true,
          "borderRadius": 8,
          "padding": 20,
          "font": {
            "family": "'Inter', sans-serif",
            "size": 15
          }
        }
      }
    }
  }
}`)

Polar area chart

<!-- Polar area chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
  "type": "polarArea",
  "data": {
    "labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
    "datasets": [{
      "label": "My dataset",
      "data": [11, 16, 7, 3, 14],
      "borderWidth": 0,
      "backgroundColor": [
        "#ed5050",
        "#448c74",
        "#edcb50",
        "#e3e9ef",
        "#3f7fca"
      ],
      "hoverBackgroundColor": [
        "#ed5050",
        "#448c74",
        "#edcb50",
        "#e3e9ef",
        "#3f7fca"
      ]
    }]
  },
  "options": {
    "scales": {
      "r": {
        "ticks": {
          "backdropColor": "rgba(255,255,255,0)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>
// Polar area chart: Multiple slices of different color + Legend
canvas(data-chart=`{
  "type": "polarArea",
  "data": {
    "labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
    "datasets": [{
      "label": "My dataset",
      "data": [11, 16, 7, 3, 14],
      "borderWidth": 0,
      "backgroundColor": [
        "#ed5050",
        "#448c74",
        "#edcb50",
        "#e3e9ef",
        "#3f7fca"
      ],
      "hoverBackgroundColor": [
        "#ed5050",
        "#448c74",
        "#edcb50",
        "#e3e9ef",
        "#3f7fca"
      ]
    }]
  },
  "options": {
    "scales": {
      "r": {
        "ticks": {
          "backdropColor": "rgba(255,255,255,0)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}`)

Radar chart

<!-- Radar chart: Multiple lines of different color with fill enabled + Legend -->
<canvas data-chart='{
  "type": "radar",
  "data": {
    "labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [65, 59, 90, 81, 56, 55, 40],
        "fill": true,
        "backgroundColor": "rgba(237, 80, 80, .15)",
        "borderColor": "#ed5050",
        "pointBackgroundColor": "#ed5050",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "#ed5050"
      },
      {
        "label": "Dataset 2",
        "data": [28, 48, 40, 19, 96, 27, 100],
        "fill": true,
        "backgroundColor": "rgba(63, 127, 202, .15)",
        "borderColor": "#3f7fca",
        "pointBackgroundColor": "#3f7fca",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "#3f7fca"
      }
    ]
  },
  "options": {
    "elements": {
      "line": {
        "borderWidth": 3
      }
    },
    "scales": {
      "r": {
        "ticks": {
          "backdropColor": "rgba(255,255,255,0)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>
// Radar chart: Multiple lines of different color with fill enabled + Legend
canvas(data-chart=`{
  "type": "radar",
  "data": {
    "labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [65, 59, 90, 81, 56, 55, 40],
        "fill": true,
        "backgroundColor": "rgba(237, 80, 80, .15)",
        "borderColor": "#ed5050",
        "pointBackgroundColor": "#ed5050",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "#ed5050"
      },
      {
        "label": "Dataset 2",
        "data": [28, 48, 40, 19, 96, 27, 100],
        "fill": true,
        "backgroundColor": "rgba(63, 127, 202, .15)",
        "borderColor": "#3f7fca",
        "pointBackgroundColor": "#3f7fca",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "#3f7fca"
      }
    ]
  },
  "options": {
    "elements": {
      "line": {
        "borderWidth": 3
      }
    },
    "scales": {
      "r": {
        "ticks": {
          "backdropColor": "rgba(255,255,255,0)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}`)