top of page
Chart.js Custom Element

Chart.js Custom Element

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

Intermediate.png

Advanced

13K

Published:

February 25, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

The Velo custom ChartJS component demonstrates how to provide  more flexibility when creating chart elements for Velo 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: Only premium Wix users on sites with their own domain and Wix ads removed can work with custom elements.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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.

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Dropdown Custom Element

Dropdown Custom Element

Create a dropdown with text and images using a custom element.

Intermediate.png

Advanced

Stencil Branch Table

Stencil Branch Table

Embed a Web Component built using the Stencil framework

Intermediate.png

Advanced

Alert Messages

Alert Messages

Display an alert popup message on the corner of the screen

Intermediate.png

Advanced

Create a Custom Chart

Create a Custom Chart

Use JavaScript post messages to communicate with the HTML component.

Intermediate.png

Advanced

Anchor 2

This website was designed with Velo by Wix

bottom of page