Chart.js Custom Element

Use custom elements to implement a chart of countries and votes per country.

Code Level

Advanced

Published

 

Example Description

The Corvid custom ChartJS component demonstrates how to provide  more flexibility when creating chart elements for Corvid sites. This component can be fully customized according to your project’s needs.

This component is using ChartJS NPM module: https://www.chartjs.org/

Note: This is an advanced level example, requiring understanding of HTML, CSS and Javascript.

Note: You can only use Custom Elements on Premium sites without ads.

Example Code

How We Built It

Database collection

This example uses a database collection of chart items. Each row in the collection holds an item in the chart including it’s label, number of votes, background color, and border color.

Chart API

The chart-api module provides the API and SEO for the custom element.

Chart Customization

The chart-customization module stores customization properties for the chart.

  

The Chart Design

The chart.js module stores css and html markup. You can customize it to get the effect you require.

 

The Custom Element

The custom-elements/chart.js module stores the custom element itself.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER