Skip to content

Commit 0ecb6ce

Browse files
NathanWalkerNathanWalker
committed
feat: new valueTextColor and textColor properties
1 parent 780fa05 commit 0ecb6ce

14 files changed

Lines changed: 286 additions & 0 deletions

‎content/ncharts/api/types.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -524,6 +524,29 @@ interface ChartDescription {
524524
}
525525
```
526526

527+
## Dark Theme Text Visibility (All Charts)
528+
529+
The following text color properties are applied consistently on both iOS and Android across all chart types:
530+
531+
- Data value labels: `drawValues`, `valueTextColor`, `valueTextSize` (dataset config)
532+
- Legend labels: `legend.textColor`, `legend.textSize`
533+
- Axis labels (where axes exist): `xAxis.textColor`, `yAxis.left.textColor`, `yAxis.right.textColor`
534+
- Description label: `chartDescription.textColor`, `chartDescription.textSize`
535+
- No-data message: `noDataTextColor`
536+
537+
```typescript
538+
const darkThemeConfig = {
539+
legend: { textColor: '#F3F4F6' },
540+
xAxis: { textColor: '#D1D5DB' },
541+
yAxis: {
542+
left: { textColor: '#D1D5DB' },
543+
right: { textColor: '#D1D5DB' },
544+
},
545+
chartDescription: { text: '', textColor: '#9CA3AF' },
546+
noDataTextColor: '#9CA3AF',
547+
};
548+
```
549+
527550
## Gradient Types
528551

529552
```typescript

‎content/ncharts/charts/bar-chart.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,30 @@ Bar charts are ideal for comparing discrete categories, showing rankings, and di
122122
</template>
123123
</FrameworkTabs>
124124

125+
## Dark Background Text Visibility
126+
127+
```typescript
128+
const barData: BarChartData = {
129+
dataSets: [
130+
{
131+
label: 'Sales',
132+
values: [120, 180, 150, 210],
133+
config: {
134+
drawValues: true,
135+
valueTextColor: '#FFFFFF',
136+
},
137+
},
138+
],
139+
};
140+
141+
const legend: LegendConfig = { textColor: '#F3F4F6' };
142+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
143+
const yAxis: YAxisConfigDual = {
144+
left: { textColor: '#D1D5DB' },
145+
right: { textColor: '#D1D5DB' },
146+
};
147+
```
148+
125149
## Data Format
126150

127151
```typescript

‎content/ncharts/charts/bubble-chart.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,30 @@ Bubble charts extend scatter plots by adding a third dimension (size), perfect f
7272
</template>
7373
</FrameworkTabs>
7474

75+
## Dark Background Text Visibility
76+
77+
```typescript
78+
const bubbleData: BubbleChartData = {
79+
dataSets: [
80+
{
81+
label: 'Companies',
82+
values: [{ x: 10, y: 25, size: 15 }, { x: 20, y: 35, size: 25 }],
83+
config: {
84+
drawValues: true,
85+
valueTextColor: '#FFFFFF',
86+
},
87+
},
88+
],
89+
};
90+
91+
const legend: LegendConfig = { textColor: '#F3F4F6' };
92+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
93+
const yAxis: YAxisConfigDual = {
94+
left: { textColor: '#D1D5DB' },
95+
right: { textColor: '#D1D5DB' },
96+
};
97+
```
98+
7599
## Data Format
76100

77101
```typescript

‎content/ncharts/charts/candlestick-chart.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,30 @@ Candlestick charts are essential for financial data visualization, showing OHLC
7272
</template>
7373
</FrameworkTabs>
7474

75+
## Dark Background Text Visibility
76+
77+
```typescript
78+
const candleData: CandleChartData = {
79+
dataSets: [
80+
{
81+
label: 'AAPL',
82+
values: [{ x: 0, shadowH: 175, shadowL: 168, open: 170, close: 173 }],
83+
config: {
84+
drawValues: true,
85+
valueTextColor: '#FFFFFF',
86+
},
87+
},
88+
],
89+
};
90+
91+
const legend: LegendConfig = { textColor: '#F3F4F6' };
92+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
93+
const yAxis: YAxisConfigDual = {
94+
left: { textColor: '#D1D5DB' },
95+
right: { textColor: '#D1D5DB' },
96+
};
97+
```
98+
7599
## Data Format
76100

77101
```typescript

‎content/ncharts/charts/combined-chart.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,32 @@ Combined charts allow you to overlay multiple chart types in a single view, perf
7272
</template>
7373
</FrameworkTabs>
7474

75+
## Dark Background Text Visibility
76+
77+
```typescript
78+
const combinedData: CombinedChartData = {
79+
barData: {
80+
dataSets: [
81+
{
82+
label: 'Revenue',
83+
values: [120, 180, 160],
84+
config: {
85+
drawValues: true,
86+
valueTextColor: '#FFFFFF',
87+
},
88+
},
89+
],
90+
},
91+
};
92+
93+
const legend: LegendConfig = { textColor: '#F3F4F6' };
94+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
95+
const yAxis: YAxisConfigDual = {
96+
left: { textColor: '#D1D5DB' },
97+
right: { textColor: '#D1D5DB' },
98+
};
99+
```
100+
75101
## Data Format
76102

77103
```typescript

‎content/ncharts/charts/horizontal-bar-chart.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,30 @@ const chartData: BarChartData = {
9696
</template>
9797
</FrameworkTabs>
9898

99+
## Dark Background Text Visibility
100+
101+
```typescript
102+
const chartData: BarChartData = {
103+
dataSets: [
104+
{
105+
label: 'Market Share',
106+
values: [42, 28, 18, 8, 4],
107+
config: {
108+
drawValues: true,
109+
valueTextColor: '#FFFFFF',
110+
},
111+
},
112+
],
113+
};
114+
115+
const legend: LegendConfig = { textColor: '#F3F4F6' };
116+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
117+
const yAxis: YAxisConfigDual = {
118+
left: { textColor: '#D1D5DB' },
119+
right: { textColor: '#D1D5DB' },
120+
};
121+
```
122+
99123
## Framework Integration
100124

101125
<FrameworkTabs>

‎content/ncharts/charts/line-chart.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,30 @@ Line charts are perfect for visualizing trends over time, comparing multiple dat
7272
</template>
7373
</FrameworkTabs>
7474

75+
## Dark Background Text Visibility
76+
77+
```typescript
78+
const lineData: LineChartData = {
79+
dataSets: [
80+
{
81+
label: 'Series',
82+
values: [10, 20, 15, 30],
83+
config: {
84+
drawValues: true,
85+
valueTextColor: '#FFFFFF',
86+
},
87+
},
88+
],
89+
};
90+
91+
const legend: LegendConfig = { textColor: '#F3F4F6' };
92+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
93+
const yAxis: YAxisConfigDual = {
94+
left: { textColor: '#D1D5DB' },
95+
right: { textColor: '#D1D5DB' },
96+
};
97+
```
98+
7599
## Data Format
76100

77101
```typescript

‎content/ncharts/charts/pie-chart.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,27 @@ Pie charts are perfect for showing proportions and part-to-whole relationships.
8787
</template>
8888
</FrameworkTabs>
8989

90+
## Dark Background Text Visibility
91+
92+
```typescript
93+
const pieData: PieChartData = {
94+
dataSets: [
95+
{
96+
label: 'Market Share',
97+
values: [35, 25, 20, 12, 8],
98+
config: {
99+
drawValues: true,
100+
valueTextColor: '#FFFFFF',
101+
},
102+
},
103+
],
104+
};
105+
106+
const legend: LegendConfig = { textColor: '#F3F4F6' };
107+
const chartDescription: ChartDescription = { text: '', textColor: '#9CA3AF' };
108+
const noDataTextColor = '#9CA3AF';
109+
```
110+
90111
## Data Format
91112

92113
```typescript

‎content/ncharts/charts/radar-chart.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,28 @@ Radar charts (also called spider or web charts) are excellent for comparing mult
7777
</template>
7878
</FrameworkTabs>
7979

80+
## Dark Background Text Visibility
81+
82+
```typescript
83+
const radarData: RadarChartData = {
84+
labels: ['Speed', 'Power', 'Defense'],
85+
dataSets: [
86+
{
87+
label: 'Character A',
88+
values: [85, 72, 90],
89+
config: {
90+
drawValues: true,
91+
valueTextColor: '#FFFFFF',
92+
},
93+
},
94+
],
95+
};
96+
97+
const legend: LegendConfig = { textColor: '#F3F4F6' };
98+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
99+
const yAxis: YAxisConfig = { textColor: '#D1D5DB' };
100+
```
101+
80102
## Data Format
81103

82104
```typescript

‎content/ncharts/charts/scatter-chart.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,30 @@ Scatter charts are ideal for visualizing correlations between two variables, ide
7272
</template>
7373
</FrameworkTabs>
7474

75+
## Dark Background Text Visibility
76+
77+
```typescript
78+
const scatterData: ScatterChartData = {
79+
dataSets: [
80+
{
81+
label: 'Group A',
82+
values: [{ x: 1, y: 12 }, { x: 2, y: 18 }],
83+
config: {
84+
drawValues: true,
85+
valueTextColor: '#FFFFFF',
86+
},
87+
},
88+
],
89+
};
90+
91+
const legend: LegendConfig = { textColor: '#F3F4F6' };
92+
const xAxis: XAxisConfig = { textColor: '#D1D5DB' };
93+
const yAxis: YAxisConfigDual = {
94+
left: { textColor: '#D1D5DB' },
95+
right: { textColor: '#D1D5DB' },
96+
};
97+
```
98+
7599
## Data Format
76100

77101
```typescript

0 commit comments

Comments
 (0)