- 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
Code
Copy
[1,2,3,4,5,6,7]
[{
"data": [10, 2, 7, 11, 5, 16, 7],
"fill": {
"above": "#EBE9FE56",
"target": "origin"
},
"tension": "0",
"borderColor": "#6941C6",
"borderWidth": "2",
"pointRadius": "0",
"pointBackgroundColor": "#6941C6"
},
{
"data": [24, 12, 34, 42, 17, 24, 38],
"fill": {
"above": "#EBE9FE56",
"target": "origin"
},
"tension": "0",
"borderColor": "#6941C6",
"borderWidth": "2",
"pointRadius": "0",
"pointBackgroundColor": "#6941C6"
},
{
"data": [62, 99, 73, 89, 57, 63, 45],
"fill": {
"above": "#EBE9FE56",
"target": "origin"
},
"tension": "0",
"borderColor": "#6941C6",
"borderWidth": "2",
"pointRadius": "0",
"pointBackgroundColor": "#6941C6"
}]
{
"layout": {
"padding": 16
},
"scales": {
"x": {
"grid": {
"color": "#E4E8ED",
"display": false,
"tickColor": "#000000",
"drawBorder": false,
"borderColor": "#000000"
},
"ticks": {
"color": "#000000",
"display": true
}
},
"y": {
"grid": {
"color": "#E4E8ED",
"display": true,
"tickColor": "#00000000",
"drawBorder": false,
"borderColor": "#000000"
},
"ticks": {
"color": "#000000",
"display": true,
"stepSize": 10
},
"beginAtZero": true
}
},
"plugins": {
"title": {
"font": {
"size": 20,
"weight": "normal"
},
"text": "ChartJS by WeWeb UI",
"color": "#000000",
"display": true,
"padding": {
"top": 0,
"bottom": 6
}
},
"legend": {
"display": false
},
"subtitle": {
"text": "Let's build!",
"color": "#00000048",
"display": true,
"padding": {
"top": 0,
"bottom": 24
}
}
},
"responsive": true,
"maintainAspectRatio": true
}