Merge pull request #261 from nocodb/docs/chart

Docs/chart

Author: dstala

content/docs/dashboards/widgets/bar-chart.mdx

@@ -0,0 +1,68 @@
+---
+title: 'Bar Chart'
+description: 'Configure bar chart widgets to compare values across categories in your dashboard'
+---
+
+![Bar Chart](/img/v2/dashboards/widget-bar-chart-home.png)
+
+The **Bar Chart** widget in NocoDB dashboards allows you to compare values across different categories. It is especially useful for highlighting trends, distributions, or comparisons between groups.
+
+## Title & Description
+- **Title**: Enter a title for the bar chart widget. This will be displayed prominently at the top of the widget.
+- **Description**: Optionally, add a description to provide context or details about the data being visualized. This will appear below the title.
+
+<img
+    src="/img/v2/dashboards/widget-bar-chart-title.png"
+    alt="Title"
+    style={{ width: "50%" }}
+/>
+
+
+## Data Source
+- **Table**: Select the table from which you want to pull data for the bar chart.
+- **Records**: Choose which records to include:
+    - **All Records**: Displays all records from the selected table.
+    - **Records from a view**: Uses records from a specific view, allowing you to apply existing filters and sorts.
+    - **Specific Records**: Apply custom filters to select only certain records.
+
+<img
+    src="/img/v2/dashboards/widget-bar-chart-source.png"
+    alt="Title"
+    style={{ width: "50%" }}
+/>
+
+## Display
+
+### X-axis
+- **Field**: Select the field whose values will be shown as categories along the X-axis (e.g., Product, Region, Status).
+- **Sort By**: Choose the criteria to sort categories:
+    - **xAxis Value**: Sorts based on the label values.
+    - **yAxis Value**: Sorts based on the numeric values plotted.
+- **Order**: Select Default, Ascending, or Descending order.
+- **Include empty records**: Optionally, include categories that do not have values.
+- **Include others**: Toggle to combine small or excess categories into an “Others” group for better readability.
+
+### Y-axis
+- **Fields**: Choose the field(s) that determine the bar lengths. You can add multiple fields for comparison.
+- **Field Summary**: Displays the **Sum, Average, Min, or Max** of a numeric field.
+- **Start at zero**: Ensures the Y-axis always begins at zero, which improves accuracy in comparing bar heights.
+
+<img
+    src="/img/v2/dashboards/widget-bar-chart-axis.png"
+    alt="Title"
+    style={{ width: "50%" }}
+/>
+
+## Appearance
+
+Customize the look of the chart to improve readability and alignment with your dashboard:
+
+- **Size**: Choose the chart size (Small, Medium).
+- **Show value in chart**: Displays numeric values directly on the bars.
+- **Show count in legend**: Adds record counts in the legend alongside category names.
+
+<img
+    src="/img/v2/dashboards/widget-bar-chart-style.png"
+    alt="Title"
+    style={{ width: "50%" }}
+/>

content/docs/dashboards/widgets/index.mdx

@@ -10,6 +10,8 @@ NocoDB dashboards support the following widget types:
 | Widget Type                                                          | Description                            |
 |----------------------------------------------------------------------|----------------------------------------|
 | **[Number](/docs/product-docs/dashboards/widgets/number)**           | Displays KPIs and metric summaries     |
+| **[Bar Chart](/docs/product-docs/dashboards/widgets/bar-chart)**     | Compares values across categories      |
+| **[Line Chart](/docs/product-docs/dashboards/widgets/line-chart)**   | Shows trends over time                 |
 | **[Pie Chart](/docs/product-docs/dashboards/widgets/pie-chart)**     | Visualizes parts of a whole            |
 | **[Donut Chart](/docs/product-docs/dashboards/widgets/donut-chart)** | Pie chart variant with a hollow center |
 | **[Text](/docs/product-docs/dashboards/widgets/text)**               | Displays static information            |

content/docs/dashboards/widgets/line-chart.mdx

@@ -0,0 +1,70 @@
+---
+title: 'Line Chart'
+description: 'Configure line chart widgets to visualize trends and comparisons over time or categories in your dashboard'
+---
+
+![Line Chart](/img/v2/dashboards/widget-line-graph-home.png)
+
+The **Line Chart** widget in NocoDB dashboards allows you to visualize trends and comparisons across categories or time. It is especially useful for tracking changes, identifying patterns, and comparing multiple metrics simultaneously.
+
+## Title & Description
+- **Title**: Enter a title for the line chart widget. This will be displayed prominently at the top of the widget.
+- **Description**: Optionally, add a description to provide context or details about the data being visualized. This will appear below the title.
+
+<img
+    src="/img/v2/dashboards/widget-line-graph-title.png"
+    alt="Line Chart Title"
+    style={{ width: "50%" }}
+/>
+
+## Data Source
+- **Table**: Select the table from which you want to pull data for the line chart.
+- **Records**: Choose which records to include:
+    - **All Records**: Displays all records from the selected table.
+    - **Records from a view**: Uses records from a specific view, allowing you to apply filters and sorts.
+    - **Specific Records**: Apply custom filters to select only certain records.
+
+<img
+    src="/img/v2/dashboards/widget-line-graph-source.png"
+    alt="Line Chart Data Source"
+    style={{ width: "50%" }}
+/>
+
+## Display
+
+### X-axis
+- **Field**: Select the field whose values will be shown along the X-axis (e.g., Date, Product, Category).
+- **Sort By**: Choose how categories are sorted:
+    - **xAxis Value**: Sorts based on the label values.
+    - **yAxis Value**: Sorts based on the numeric values plotted.
+- **Order**: Select Default, Ascending, or Descending.
+- **Include empty records**: Optionally include categories that have no values.
+- **Include others**: Toggle to group smaller categories into an “Others” bucket.
+
+### Y-axis
+- **Fields**: Choose the field(s) to plot on the Y-axis. You can add multiple fields to display multiple lines in the chart.
+- **Record Count**: Shows the number of records for each category.
+- **Field Summary**: Displays the **Sum, Average, Min, or Max** of a numeric field.
+- **Start at zero**: Ensures the Y-axis always begins at zero for consistency.
+
+<img
+    src="/img/v2/dashboards/widget-line-graph-axis.png"
+    alt="Line Chart Axis Config"
+    style={{ width: "50%" }}
+/>
+
+## Appearance
+
+Customize how the chart is displayed for clarity and readability:
+
+- **Size**: Adjust the chart size (Small, Medium).
+- **Legend Orientation**: Choose where to display the legend (Top, Bottom, Left, Right).
+- **Show count in legend**: Enable to display record counts in the legend.
+- **Plot data points**: Enable to highlight data points on the line.
+- **Smooth lines**: Enable to display smoothed curves instead of jagged lines.
+
+<img
+    src="/img/v2/dashboards/widget-line-graph-style.png"
+    alt="Line Chart Appearance"
+    style={{ width: "50%" }}
+/>

content/docs/dashboards/widgets/meta.json

@@ -2,6 +2,8 @@
   "pages": [
     "number",
     "text",
+    "bar-chart",
+    "line-chart",
     "pie-chart",
     "donut-chart",
     "iframe"