- In your own project, add a new "Div" and place the "ChartJS Line Graph" component inside of it;
- Make sure the ChartJS component in selected inthe main edit area;
- In the right-hand side Edit panel, change the ChartJS mode from "Guided" to "Advanced".
Line Chart
General
Responsive
On
Off
Maintain Aspect Ratio
On
Off
Datasources
1
2
3
Data 1
Line Color
#6941C6
Dashed Line
On
Off
Line Width
Point Radius
Tension
Fill Below Line
On
Off
Color Below Line
#EBE9FE56
Data 2
Line Color
#6941C6
Dashed Line
On
Off
Line Width
Point Radius
Tension
Fill Below Line
On
Off
Color Below Line
#EBE9FE56
Data 3
Line Color
#6941c6
Dashed Line
On
Off
Line Width
Point Radius
Tension
Fill Below Line
On
Off
Color Below Line
#E4E8ED
Background
Horizontal Lines
On
Off
Horizontal Lines Color
#E4E8ED
Vertical Lines
On
Off
Vertical Lines Color
#E4E8ED
Title Area
Alignment
L
C
R
Header Text
On
Off
Header Text
Header Text Color
#00000048
Header Text Size
Sub-Header Text
On
Off
Sub-Header Text
Sub-Header Text Color
#00000048
Sub-Header Text Size
X & Y Axis
Bottom Border
On
Off
Bottom Border Color
#000000
Bottom Ticks
On
Off
Bottom Ticks Color
#000000
Left Border
On
Off
Left Border Color
#00000000
Left Ticks
On
Off
Left Ticks Color
#000000
Left Ticks Step Size
Line Chart Preview
Build
Implement
Reset
Advanced ChartJS
This quick tutorial will help you create a pixel-perfect chart in your own application based on the configurations you've created here.
Frontend/ Visual
Setting up your project
Transferring the style
- In the WeWeb UI, click on the "Labels" tab in the right-hand side Code panel;
- Click "Copy" to copy the code;
- Navigate back to your own project, click the "Bind" button for "Labels" in the ChartJS Advanced configuration;
- Change the setting from "Formula" to "Javascript" and remove any existing text;
- Paste the WeWeb UI code from step 2;
- Repeat the same steps for the Datasets and Options configurations.
Preview of how the styling will appear in your project
Labels
Datasets
Options