After creating your line chart app, you can amend the Line Chart styles. Most styling is done under the Configuration tab, but fonts are edited under the Styles tab.

Table of Contents

Line Color & Weight

1. Click Configuration.
2. Browse to Components | Line Chart | Chart Props, then click Series Props.
3. Click one of the options under Series Props, e.g. KS Alpha Fund.

4. Type in a color name or hex code in the Stroke field.
5. Type in a stroke width (in pixels).

6. Click back to Series Props.
7. Repeat this process for any additional lines.

8. Click Save.
9. Type in a comment, then click Confirm.

Legend Icon

1. With the Configuration tab selected, browse to Components | Line Chart | Chart Props.
2. Click Element Overrides.
3. Click Legend.

4. Use the dropdown arrow to select a different Icon Type, e.g. star.
5. Click Save.
6. Type in a comment, then click Confirm.

Font

1. With the Styles tab selected, click Add Element+.
2. Select Components.
3. Click Save.

4. Click Components.
5. Click Add Element+.

6. Select Line Chart (this will apply the same font styles to all text in the line chart app).
7. Click Save.
8. Click Line Chart.

9. Click Add Element+.
10. Scroll or use the search bar to select Font.
11. Click Save.

12. Click Font.
13. Click Add Element+.

14. Scroll down or use the search bar to select Family and Size.
15. Click Save.

16. Type in a font Family.
17. Type in a font Size.
18. Click Save.
19. Type in a comment, then click Confirm.

Tooltip Background

1. With the Style tab selected, click Add Element+.
2. Select Theme, then click Save.

3. Click Theme.
4. Click Add Element+.

5. Select Charting, then click Save.
6. Click Charting.

7. Click Add Element+.
8. Scroll or search to select Line Chart, then click Save.

9. Click Line Chart.
10. Click Add Element+.

11. Scroll or search to select Overrides, then click Save.
12. Click Overrides.

13. Click Add Row+ twice.
14. Click 1.No Label.

15. Selector* – type in the name of the selector that is referenced in the CSS, in this case .recharts-default-tooltip (make sure you include the period in front).
16. Click +Create Component Style*.
17. Click Add Element+.

18.  Select Background and Border, then click Save.
19. Click Background.

20. Click Add Element+.
21. Scroll or search to select Color.

22. Type in a Color name or hex code followed by !important, this will override any other potential colors.
23. Browse to Border in the left navigation pane, then click Add Element+.

24.  Select Value, then click Save.
25. Type in a Color name or hex code, a border Style and a value for Width in pixels followed by !important.

26. Click Save.
27. Type in a comment, then click Confirm.

Ticker Line/Cursor

1. Browse to Components | Line Chart | Chart Props, then click Element Overrides.
2. Click Tooltip.

3. Use the dropdown arrow below Cursor to select boolean.
4. Leave the checkbox unchecked.
5. Click Save.
6. Type in a comment, then click Confirm.

Y-Axis Range

1. Browse to Components | Line Chart | Chart Props, then click Element Overrides.
2. Scroll or search to select Overrides, then click Save.

3. Change the Tick Pivot Point value, e.g. to “0”. The y-Axis will now start at “0”.
4. Click Add Element+.
5. Scroll or search to select Tick Count, then click Save.

6. Type in a value for the Tick Count to increase the number of ticks in the y-Axis, e.g. “8”.
7. Click Save.
8. Type in a comment, then click Confirm.