[docs][charts] Similar introduction on most charts pages (#17374)

Author: alexfauquette

docs/data/charts/axis/axis.md

@@ -119,9 +119,9 @@ You can change this behavior with the property `reverse`.
 You can add a grid in the background of the cartesian chart with the `grid` prop.
 
 It accepts an object with `vertical` and `horizontal` properties.
-Setting those properties to `true` will display the grid lines.
+Setting those properties to `true` displays the grid lines.
 
-If you use composition you can pass those properties to the `<ChartsGrid />` component.
+If you use composition you can pass those as props to the `<ChartsGrid />` component.
 
 ```jsx
 <BarChart grid={{ vertical: true }}>
@@ -230,7 +230,7 @@ If you would like to reduce clipping due to overflow, you can [apply an angle to
 In the following demo, the size of the x- and y-axes is modified to increase the space available for tick labels.
 
 The first and last tick labels may bleed into the margin. If that margin is not enough to display the label, it might be clipped.
-To avoid this, you can use the `margin` property to increase the space between the chart and the edge of the container.
+To avoid this, you can use the `margin` prop to increase the space between the chart and the edge of the container.
 
 {{"demo": "MarginAndLabelPosition.js"}}
 
@@ -256,7 +256,7 @@ If you are using composition, you have to provide the axis settings in the `<Cha
 It will provide all the scaling properties to its children, and allows you to use `<XAxis/>` and `<YAxis/>` components as children.
 Those components require an `axisId` prop to link them to an axis you defined in the `<ChartContainer />`.
 
-You can choose their position with `position` props which accept `'top'`/`'bottom'` for `<XAxis />` and `'left'`/`'right'` for `<YAxis />`.
+You can choose their position with `position` prop which accepts `'top'`/`'bottom'` for `<XAxis />` and `'left'`/`'right'` for `<YAxis />`.
 Other props are similar to the ones defined in the [previous section](/x/react-charts/axis/#rendering).
 
 {{"demo": "AxisWithComposition.js"}}

docs/data/charts/bars/bars.md

@@ -12,7 +12,7 @@ components: BarChart, BarChartPro, BarElement, BarPlot, ChartsGrid, BarLabel
 
 Bar charts series should contain a `data` property containing an array of values.
 
-You can customize bar ticks with the `xAxis`.
+You can specify bar ticks with the `xAxis` prop.
 This axis might have `scaleType='band'` and its `data` should have the same length as your series.
 
 {{"demo": "BasicBars.js"}}
@@ -111,7 +111,7 @@ It works with any positive value and is properly applied to horizontal layouts,
 ## Labels
 
 You can display labels on the bars.
-To do so, the `BarChart` or `BarPlot` accepts a `barLabel` property.
+To do so, the `BarChart` or `BarPlot` accepts a `barLabel` prop.
 It can either get a function that gets the bar item and some context.
 Or you can pass `'value'` to display the raw value of the bar.
 

docs/data/charts/funnel/funnel.md

@@ -10,7 +10,7 @@ components: FunnelChart, FunnelPlot
 
 ## Basics
 
-Funnel charts series should contain a data property containing an array of objects.
+Funnel charts series must contain a `data` property containing an array of objects.
 Each object corresponds to a section of the funnel.
 It must contain a property `value` and can have other optional properties, like `label` and `id`.
 
@@ -21,7 +21,7 @@ It must contain a property `value` and can have other optional properties, like
 The funnel chart displays a legend by default.
 The only requirement is to provide a `label` value in the data objects.
 
-To disable the legend, set the `hideLegend` property to `true`.
+To disable the legend, set the `hideLegend` prop to `true`.
 
 {{"demo": "FunnelLegend.js"}}
 

docs/data/charts/heatmap/heatmap.md

@@ -10,12 +10,20 @@ components: Heatmap, HeatmapPlot, HeatmapTooltip
 
 ## Basics
 
-The Heatmap requires two axes with `data` properties.
-Those data defined the x and y categories.
-
-The series `data` is an array of 3-tuples.
-The 2 first numbers are respectively the x and y indexes of the cell.
-And the third is its value.
+Heatmap charts series must contain a `data` property containing an array of 3-tuples.
+The first two numbers in each tuple correspond to the x and y indexes of the cell, respectively.
+The third number is the value for the given cell.
+
+```jsx
+series={[{
+    data: [
+        [0, 2, 2.7], // Cell (0, 2) receives the value 2.7
+        [1, 2, 4.5], // Cell (1, 2) receives the value 4.5
+    ]
+}]}
+```
+
+You can specify x and y ticks with the `xAxis` and `yAxis` props.
 
 {{"demo": "BasicHeatmap.js"}}
 

docs/data/charts/legend/legend.md

@@ -43,15 +43,15 @@ It can also be moved with the `position: { vertical, horizontal }` property whic
 By default, the legend is placed above the charts.
 
 :::warning
-The `position` property is only available in the `slotProps`, but not in the `<ChartsLegend />`.
+The `position` property is only available in the `slotProps`, but not in the `<ChartsLegend />` props.
 In the second case, you are free to place the legend where you want.
 :::
 
 {{"demo": "LegendPosition.js", "hideToolbar": true, "bg": "playground"}}
 
 ### Hiding
 
-You can hide the legend with the `hideLegend` property of the Chart.
+You can hide the legend with the `hideLegend` prop of the Chart.
 
 {{"demo": "HiddenLegend.js"}}
 

docs/data/charts/lines/lines.md

@@ -12,11 +12,13 @@ components: LineChart, LineChartPro, LineElement, LineHighlightElement, LineHigh
 
 ### Data format
 
-To plot lines, a series must have a `data` property containing an array of numbers.
-This `data` array corresponds to y values.
+Line charts series should contain a `data` property containing an array of numbers.
+This `data` array corresponds to y-values.
 
-By default, those y values will be associated with integers starting from 0 (0, 1, 2, 3, ...).
-To modify the x values, you should provide a `xAxis` with data property.
+You can specify x-values with the `xAxis` prop.
+This axis can have any `scaleType` and its `data` should have the same length as your series.
+
+By default, those y-values will be associated with integers starting from 0 (0, 1, 2, 3, ...).
 
 {{"demo": "BasicLineChart.js"}}
 

docs/data/charts/pie/pie.md

@@ -10,9 +10,9 @@ components: PieArc, PieArcLabel, PieArcLabelPlot, PieArcPlot, PieChart, PiePlot
 
 ## Basics
 
-To plot a pie chart, a series must have a data property containing an array of objects.
-Those objects should contain a property `value`.
-They can also have a `label` property.
+Pie charts series must contain a `data` property containing an array of objects.
+Each object corresponds to a slice of the pie.
+It must contain a property `value` and can have other optional properties like `label`.
 
 If you plan to update/reorder those data, you should add an `id` property which is used for `key` props.
 

docs/data/charts/radar/radar.md

@@ -10,10 +10,10 @@ components: RadarChart, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSerie
 
 ## Basics
 
-A radar chart is defined by two main props:
+Radar charts series should contain a `data` property containing an array of values.
 
-- The `series` prop which provides the values to display thanks to the `data` property.
-- The `radar` prop which defines the radar axes.
+Radar charts also require a `radar` prop with a `metrics` property containing an array of string or objects.
+Each item of this array define a metric of the radar.
 
 {{"demo": "BasicRadar.js"}}
 
@@ -29,7 +29,7 @@ Radar series support `hideMark` and `fillArea` parameter to modify the rendering
 
 {{"demo": "DemoRadarVisualisation.js"}}
 
-## Axis
+## Metrics
 
 The `metrics` property of `radar` takes an array with one item per corner of the radar.
 This item can either be: