diff --git a/docs/components/charts/pie-chart.md b/docs/components/charts/pie-chart.md
index 69c00685..33aa8a80 100644
--- a/docs/components/charts/pie-chart.md
+++ b/docs/components/charts/pie-chart.md
@@ -48,7 +48,7 @@ Um componente de gráfico reutilizável para exibir dados visualmente.
 ## Props
 
 <APITable
-	name="CdsBarChart"
+	name="CdsPieChart"
 	section="props"
 />
 <br>
diff --git a/docs/components/charts/polar-area-chart.md b/docs/components/charts/polar-area-chart.md
index 2b236167..000d98c5 100644
--- a/docs/components/charts/polar-area-chart.md
+++ b/docs/components/charts/polar-area-chart.md
@@ -43,7 +43,7 @@ Um componente de gráfico reutilizável para exibir dados visualmente.
 ## Props
 
 <APITable
-	name="CdsBarChart"
+	name="CdsPolarAreaChart"
 	section="props"
 />
 <br>
diff --git a/docs/docgen/PlaygroundBuilder.vue b/docs/docgen/PlaygroundBuilder.vue
index baa3c9e5..e10b8c97 100644
--- a/docs/docgen/PlaygroundBuilder.vue
+++ b/docs/docgen/PlaygroundBuilder.vue
@@ -97,7 +97,7 @@
 						<CdsText class="prop-name">
 							{{ capitalize(data.name) }}
 						</CdsText>
-		
+
 						<CdsSwitch
 							v-if="Object.keys(normalizedPropsData).length > 0"
 							v-model="normalizedPropsData[index][data.name]"
@@ -144,7 +144,7 @@ function formatOptions(val: string[]) {
 	})
 }
 
-watch(model, () => {
+watch(propsData, () => {
 	nextTick(() => {
 		if (!propsData.value || !Array.isArray(propsData.value)) {
 			normalizedPropsData.value = [];
@@ -195,7 +195,7 @@ watch(model, () => {
 		}
 	});
 
-}, { immediate: true, deep: true})
+}, { immediate: true, deep: true })
 
 function capitalize(str: string) {
 	return str ? str[0].toUpperCase() + str.slice(1) : '';
@@ -205,12 +205,12 @@ watch(normalizedPropsData, () => {
 	if (normalizedPropsData.value && Array.isArray(normalizedPropsData.value)) {
 		normalizedPropsData.value.forEach((item) => {
 			const [key, value] = Object.entries(item)[0];
-			if (model.value) {
+			if (model.value && model.value !== value) {
 				(model.value as any)[key] = value;
 			}
 		});
 	}
-}, { deep: true})
+}, { deep: true })
 
 
 export type PlaygroundBuilderType = typeof import('./PlaygroundBuilder.vue')['default'];
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
index 332d29f8..cba46593 100644
--- a/src/components/BarChart.vue
+++ b/src/components/BarChart.vue
@@ -125,18 +125,21 @@ export default {
 	watch: {
 		labels: {
 			handler(newValue) {
-				this.localLabels = newValue
+				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
-			handler(newValue, oldValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+			handler(newValue) {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
@@ -150,11 +153,38 @@ export default {
 
 		barWidth: {
 			handler(newValue) {
-				if (newValue >= 0.1 && newValue <= 1) {
-					this.chartOptions.categoryPercentage = newValue;
-				} else {
-					this.chartOptions.categoryPercentage = 1;
-				}
+				const categoryPercentage = (newValue >= 0.1 && newValue <= 1) ? newValue : 1;
+				this.chartOptions = {
+					...this.chartOptions,
+					categoryPercentage,
+				};
+			},
+			immediate: true,
+		},
+
+		horizontalBar: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					indexAxis: newValue ? 'y' : 'x',
+					scales: {
+						...this.chartOptions.scales,
+						x: newValue
+							? { beginAtZero: true }
+							: { ...this.chartOptions.scales?.x },
+						y: !newValue
+							? {
+								beginAtZero: true,
+								grace: '5%',
+								ticks: {
+									precision: 0
+								},
+								categoryPercentage: 0.6,
+								barPercentage: 0.8
+							}
+							: { ...this.chartOptions.scales?.y },
+					},
+				};
 			},
 			immediate: true,
 		},
diff --git a/src/components/DonutChart.vue b/src/components/DonutChart.vue
index 20eee72d..c5d92719 100644
--- a/src/components/DonutChart.vue
+++ b/src/components/DonutChart.vue
@@ -135,17 +135,34 @@ export default {
 		labels: {
 			handler(newValue) {
 				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		theme: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		colors: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
index ca08128f..2b098d8e 100644
--- a/src/components/LineChart.vue
+++ b/src/components/LineChart.vue
@@ -232,18 +232,28 @@ export default {
 	watch: {
 		labels: {
 			handler(newValue) {
-				this.localLabels = newValue
+				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		theme: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
@@ -255,11 +265,116 @@ export default {
 			immediate: true,
 		},
 
+		showLabelName: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		fill: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					fill: newValue,
+				};
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
 		isDashed: {
+			handler() {
+				this.checkDashed();
+			},
+			immediate: true,
+		},
+
+		borderDash: {
+			handler() {
+				this.checkDashed();
+			},
+			immediate: true,
+		},
+
+		scales: {
 			handler(newValue) {
-				if (newValue === true) {
-					this.checkDashed();
-				}
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						...newValue,
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		animation: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					animation: {
+						...newValue,
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		plugins: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					plugins: {
+						...this.chartOptions.plugins,
+						...newValue,
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		xAxisRange: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						x: {
+							...this.chartOptions.scales?.x,
+							suggestedMin: newValue[0],
+							suggestedMax: newValue[1],
+						},
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		yAxisRange: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						y: {
+							...this.chartOptions.scales?.y,
+							suggestedMin: newValue[0],
+							suggestedMax: newValue[1],
+						},
+					},
+				};
+			},
+			immediate: true,
+		},
+
+		smoothing: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					tension: newValue,
+				};
 			},
 			immediate: true,
 		},
@@ -373,7 +488,10 @@ export default {
 		},
 
 		checkDashed() {
-			this.chartOptions.borderDash = [this.borderDash[0], this.borderDash[1]];
+			this.chartOptions = {
+				...this.chartOptions,
+				borderDash: this.isDashed ? [this.borderDash[0], this.borderDash[1]] : [],
+			};
 		}
 	}
 }
diff --git a/src/components/PieChart.vue b/src/components/PieChart.vue
index 8e995909..63ee3bda 100644
--- a/src/components/PieChart.vue
+++ b/src/components/PieChart.vue
@@ -136,17 +136,27 @@ export default {
 		labels: {
 			handler(newValue) {
 				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		colors: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
diff --git a/src/components/PolarAreaChart.vue b/src/components/PolarAreaChart.vue
index 0ac4d399..44da044c 100644
--- a/src/components/PolarAreaChart.vue
+++ b/src/components/PolarAreaChart.vue
@@ -125,18 +125,21 @@ export default {
 	watch: {
 		labels: {
 			handler(newValue) {
-				this.localLabels = newValue
+				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
@@ -147,6 +150,25 @@ export default {
 			},
 			immediate: true,
 		},
+
+		isVisiblePointNames: {
+			handler(newValue) {
+				this.chartOptions = {
+					...this.chartOptions,
+					scales: {
+						...this.chartOptions.scales,
+						r: {
+							...this.chartOptions.scales?.r,
+							pointLabels: {
+								...this.chartOptions.scales?.r?.pointLabels,
+								display: newValue,
+							},
+						},
+					},
+				};
+			},
+			immediate: true,
+		},
 	},
 
 	methods: {
@@ -187,7 +209,7 @@ export default {
 			data.forEach(obj => {
 				obj.datasets.forEach(state => {
 					const dataset = {
-						label: this.showLabelName ? state.name :state.label,
+						label: state.label,
 						data: state.data,
 						name: state.name,
 						borderRadius: 6,
diff --git a/src/components/RadialBarChart.vue b/src/components/RadialBarChart.vue
index 442616fe..1b91f3aa 100644
--- a/src/components/RadialBarChart.vue
+++ b/src/components/RadialBarChart.vue
@@ -59,16 +59,9 @@ export default {
 		* `data` (array com os valores númericos).
 		*/
 		data: {
-			type: Object,
+			type: Array,
 			required: true,
-			default: () => ({
-				datasets: [
-					{
-						label: '',
-						data: [],
-					}
-				]
-			})
+			default: () => [],
 		},
 		/**
 		* Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:
@@ -173,23 +166,41 @@ export default {
 		labels: {
 			handler(newValue) {
 				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		theme: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		colors: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		data: {
 			handler(newValue) {
+				this.updateLargestValue(newValue);
 				this.mergeChartDataNoSelect(newValue);
 			},
 			immediate: true,
@@ -197,20 +208,22 @@ export default {
 	},
 
 	mounted() {
-
-		this.data.forEach(item => {
-			if (item.datasets[0].data[0] > this.largestValue) {
-				this.largestValue = item.datasets[0].data[0];
-			}
-			
-		})
-
+		this.updateLargestValue(this.data);
 		this.mergeChartDataNoSelect(this.data);
 	},
 
 	methods: {
 		paleteBuilder,
 
+		updateLargestValue(chartData) {
+			this.largestValue = 0;
+			chartData.forEach(item => {
+				if (item.datasets[0] && item.datasets[0].data && item.datasets[0].data[0] > this.largestValue) {
+					this.largestValue = item.datasets[0].data[0];
+				}
+			});
+		},
+
 		palete() {
 			this.palletColors = this.paleteBuilder(this.sassColorVariables.palete);
 			this.removeFirstTwoElements();
diff --git a/src/components/StackedBarChart.vue b/src/components/StackedBarChart.vue
index 8794f4f0..75377b3e 100644
--- a/src/components/StackedBarChart.vue
+++ b/src/components/StackedBarChart.vue
@@ -154,18 +154,28 @@ export default {
 	watch: {
 		labels: {
 			handler(newValue) {
-				this.localLabels = newValue
+				this.localLabels = newValue;
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
 
 		variant: {
 			handler(newValue) {
-				if (newValue === 'gray' || newValue === 'dark')  {
+				if (newValue === 'gray' || newValue === 'dark') {
 					this.deleteFirstTwoColors = true;
 				} else {
 					this.deleteFirstTwoColors = false;
 				}
+
+				this.mergeChartDataNoSelect(this.data);
+			},
+			immediate: true,
+		},
+
+		theme: {
+			handler() {
+				this.mergeChartDataNoSelect(this.data);
 			},
 			immediate: true,
 		},
@@ -179,11 +189,11 @@ export default {
 
 		barWidth: {
 			handler(newValue) {
-				if (newValue >= 0.1 && newValue <= 1) {
-					this.chartOptions.categoryPercentage = newValue;
-				} else {
-					this.chartOptions.categoryPercentage = 1;
-				}
+				const categoryPercentage = (newValue >= 0.1 && newValue <= 1) ? newValue : 1;
+				this.chartOptions = {
+					...this.chartOptions,
+					categoryPercentage,
+				};
 			},
 			immediate: true,
 		},