JavaScript Chart Custom Theme

There are two possible ways to modify the styles of the chart JavaScript control:

1. Since the theme is in itself a collection of settings, one can simply set all the desired visual settings directly.
For example, setting the series palette is done as shown in this topic.
Essentially, all elements are accessible through the API of the control.

2. The second option is to define your own theme. The steps are listed below.

First, define the theme. This is a simple .js file. In our case, this is named custom.js.
Then, include a reference in the page, containing the chart, to the .js file. This may look something like this:

 <script type="text/javascript" src="custom.js"></script>

The last thing is to define the theme itself. Our custom theme is a collection of properties,
which are applied to the chart when it is initialized. This can be the palette, the color of the text for the items,
the pointmark color and states, or any other customizable chart element.
Below is a sample complete declaration:

// custom theme
(function (shield) {
    shield.ui.Chart.themes.custom = {
        seriesPalette: ['#FF2A00', '#FFC500', '#C9C9C9', "#FC2150", "#0077C6", "#99c900", "#cc6e38"],
        primaryHeader: {
            style: {
                color: '#FFFFFF'
            }
        },
        secondaryHeader: {
            style: {
                color: '#F2F2F2'
            }
        },
        backgroundColor: '#2D2D2D',
        borderWidth: 0,
        chartAreaBackgroundColor: '#2D2D2D',
        chartAreaShadow: false,
        chartAreaBorderWidth: 0,
        seriesSettings: {
            scatter: {
                activeSettings: {
                    pointHoveredState: {
                        drawWidth: 4
                    }
                },
                pointMark: {
                    enabled: true,
                    drawWidth: 2,
                    drawRadius: 2.5,
                    drawColor: null,
                    innerColor: '#2D2D2D',
                    activeSettings: {
                        pointHoveredState: {
                            innerColor: null
                        }
                    }
                }
            },
            area: {
                drawWidth: 2,
                pointMark: {
                    enabled: false,
                    drawWidth: 2,
                    drawRadius: 2.5,
                    drawColor: null,
                    innerColor: '#2D2D2D',
                    activeSettings: { // activeSettings for a single point
                        pointHoveredState: {
                            enabled: false,
                            drawRadius: 4
                        }
                    }
                }
            },
            splinearea: {
                drawWidth: 2,
                pointMark: {
                    enabled: false,
                    drawWidth: 2,
                    drawRadius: 2.5,
                    drawColor: null,
                    innerColor: '#2D2D2D',
                    activeSettings: { // activeSettings for a single point
                        pointHoveredState: {
                            innerColor: null
                        }
                    }
                }
            },
            line: {
				drawWidth: 3,
				shadow: false,
				mouseInteractions: true,
				pointMark: {
					enabled: true,
					drawWidth: 2,
					drawRadius: 2.5,
					drawColor: null,
					innerColor: '#2D2D2D',
					activeSettings: {
						pointHoveredState: {
							innerColor: null
						}
					}
				}
			},
            spline: {
				drawWidth: 3,
				shadow: false,
				activeSettings: {
					pointHoveredState: {
						drawWidth: 4
					}
				},
				pointMark: {
					enabled: true,
					drawWidth: 2,
					drawRadius: 2.5,
					drawColor: null,
					innerColor: '#2D2D2D',
					activeSettings: {
						pointHoveredState: {
							innerColor: null
						}
					}
				}
			},
            pie: {
                dataPointText: {
                    style: {
                        color: '#7E7E7E'
                    }
                }
            },
            donut: {
                dataPointText: {
                    style: {
                        color: '#7E7E7E'
                    }
                }
            }
        },
        axisX: {
            drawColor: '#7E7E7E',
            ticksColor: '#7E7E7E',
            axisTickText: {
                style: {
                    color: '#7E7E7E'
                },
                y: 17
            },
            title: {
                style: {
                    color: '#7E7E7E'
                }
            }
        },
        axisY: {
            drawColor: '#7E7E7E',
            ticksColor: '#7E7E7E',
            plotStripColor: '#7E7E7E',
            plotStripDashStyle: 'LongDash',
            axisTickText: {
                style: {
                    color: '#7E7E7E'
                }
            },
            title: {
                style: {
                    color: '#7E7E7E'
                }
            }
        },
        chartLegend: {
            legendItemSettings: {
                elementStyle: {
                    color: '#A5A5A5'
                },
                mouseOverStyle: {
                    color: '#FFFFFF'
                },
                disabledStyle: {
                    color: '#7E7E7E'
                }
            }
        }
    };
})(shield);