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.
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.
Related Examples
Did this help?
|
Thanks for your feedback!
Dropdown Custom Element
Create a dropdown with text and images using a custom element.
Advanced
Stencil Branch Table
Embed a Web Component built using the Stencil framework
Advanced
Alert Messages
Display an alert popup message on the corner of the screen
Advanced
Create a Custom Chart
Use JavaScript post messages to communicate with the HTML component.
Advanced