JavaScript-Chart-Samples/src/CssStyling.css at master · MindFusionComponents/JavaScript-Chart-Samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#areaChart,
#barChart,
#pieChart,
#towerChart {
    /* Main Layout Settings */
    --mfc-plot-background: #0d0f1a;
    --mfc-legend-background: #121526;
    --mfc-legend-border-stroke: #1a1e36;
    --mfc-legend-title-brush: #00f0ff; /* Neon Cyan */
    --mfc-legend-labels-brush: #90a4ae;

    /* Typography Customization */
    --mfc-axis-labels-font-name: 'Inter', system-ui, -apple-system, sans-serif;
    --mfc-data-labels-font-name: 'Inter', system-ui, -apple-system, sans-serif;
    --mfc-axis-labels-font-size: 11px;
    --mfc-axis-labels-brush: #78909c;
    --mfc-data-labels-font-size: 11px;
    --mfc-data-labels-brush: #ffffff;

    /* Grid and Axes Customization */
    --mfc-grid-line-color: #1a1e36;
    --mfc-axis-stroke: #2c3258;
}

#areaChart,
#barChart {
    /* Series palette: Vibrant Synthwave/Cyberpunk Neons */
    --mfc-common-series-fill-0: #ff007f; /* Neon Pink */
    --mfc-common-series-fill-1: #00f0ff; /* Neon Cyan */
    --mfc-common-series-fill-2: #7000ff; /* Neon Violet */

    --mfc-common-series-stroke-0: #ff007f;
    --mfc-common-series-stroke-1: #00f0ff;
    --mfc-common-series-stroke-2: #7000ff;

    --mfc-common-series-stroke-thickness-0: 2px;
    --mfc-common-series-stroke-thickness-1: 2px;
    --mfc-common-series-stroke-thickness-2: 2px;
}

#pieChart,
#towerChart {
    /* Series palette for independent slice rendering */
    --mfc-series-fill-0-0: #ff007f; /* Neon Pink */
    --mfc-series-fill-0-1: #00f0ff; /* Neon Cyan */
    --mfc-series-fill-0-2: #7000ff; /* Neon Violet */
    --mfc-series-fill-0-3: #39ff14; /* Acid Green */

    --mfc-series-stroke-0-0: #ffffff;
    --mfc-series-stroke-0-1: #ffffff;
    --mfc-series-stroke-0-2: #ffffff;
    --mfc-series-stroke-0-3: #ffffff;

    --mfc-series-stroke-thickness-0-0: 1px;
    --mfc-series-stroke-thickness-0-1: 1px;
    --mfc-series-stroke-thickness-0-2: 1px;
    --mfc-series-stroke-thickness-0-3: 1px;
}