Quick Start

Welcome to Framer Charts, a dynamic and adaptable chart component for Framer. This guide highlights how to effectively use various property controls for personalizing your charts.

Data Source

Manual

• Labels: Setting the x-axis labels of a chart.

• Datasets: Set the dataset of the chart, supports single or multiple datasets.

Note: When the chart type is bubble, due to the three-dimensional nature of the bubble, labels are no longer in effect and the size of the position of each data point is determined by three dimensions (x, y, r).

Random

• Labels: Setting the x-axis labels of a chart.

• Datasets: In random mode, only the number of datasets takes effect, not the values in them.

• Trend: Controls the trend of the data and ranges from -1 to 1, with negative numbers trending downward, positive numbers trending upward, and 0 being a completely random trend.

• Fluctuation: Controls the degree of fluctuation of the chart data, the larger the value the more pronounced the fluctuation.

• Max & Min: Controls the range for random data.

API

• API URL: Enter the API URL here (visible only if API Data is Yes ).

• Use Token: Change to Yes if your API requires a token.

• Token: Provide your complete authorization line here, not just the token string (visible only if Use Token is Yes ).

  • Format example: Authorization: Bearer YOUR_TOKEN_HERE

• Data Transform: Set to Yes to turn on data format transformation, when you fetch data directly from the database or when your middleware does not process the data format.

• Labels: Enter the name of the column that will be the label you want to use as the x-axis.

• Datasets: Enter the names of the columns you want to use as datasets.

JSON

• JSON Code: Paste your JSON data into the textarea.

Chart Settings

• Chart Type: Choose from bar, line, pie, doughnut, radar, polar, bubble, or scatter.

• Direction: Select Vert or Horiz for the bar chart's direction.

• Stacked: Set to Yes for stacked charts (not available for pie/doughnut/radar).

• Fill: Set to Yes to fill the area under the line in line/radar charts.

• Smooth: Set to Yes for smoother curves in line charts.

• Border Width: Adjust the width of your chart elements' border.

• Point Width: Adjust the width of points for line/radar charts.

• Bar Percentage: Adjust the width of bars in bar charts.

• Group Percentage: Adjust the group width in bar charts.

• Radius: Adjust the border radius of chart elements.

• Arc Spacing: Adjust the arc spacing in doughnut charts.

• Cutout: Adjust the doughnut chart cutout percentage.

• Step Size: Adjust the step size for scale ticks (not for pie/doughnut).

• Label Font Family: Choose a font family for chart labels.

• Label Font Size: Adjust the size for label fonts.

• Label Font Color: Set a color for your labels.

• Grid X Color: Set a color for the X-axis grid.

• Grid Y Color: Set a color for the Y-axis grid.

• Radial Grid Color: Set a color for the radial grid in radar charts.

• Angle Lines Color: Set colors for angle lines in radar charts.

• Simple X: Set to Yes to show a simplified X-axis (not applicable for radar charts).

• X/Y Label: Set to Yes to show labels on X and Y axes (not applicable for radar charts).

• Ticks Label: Set to Yes to show tick labels (specifically for radar charts).

• Point Labels: Set to Yes to show point labels in radar charts.

• X/Y Grid: Set to Yes to show grid lines on X and Y axes (not applicable for radar charts).

• X/Y Ticks: Set to Yes to show tick marks on X and Y axes (not applicable for radar charts).

• Radial Grid: Set to Yes to show a radial grid in radar charts.

• Angle Lines: Set to Yes to show angle lines in radar charts.

• Border X/Y: Set to Yes to show borders on X and Y axes (not applicable for radar charts).

Color Setting Logic

The chart dynamically adjusts colors based on your selections:

• Color Palettes: Customize your dataset's color palette. The component iteratively applies colors to each dataset. For pie and doughnut charts, colors are applied based on data instead of datasets. By default, the border color is the same as the background color.

• Detach Border Color: If you want to set the border color to be different from the background color, set to Yes.

• Global Border Color: Set to Yes when you want to set all borders to the same color. A common use case is in pie charts, using a global border color of white to improve readability.

• Global Fill / Border Opacity: Controls the global opacity.

Other Settings

• Override Border: Toggle to Yes for overriding border colors.

• Override Border Color: Set a color (visible if Override Border is Yes ).

• Bg Opacity: Adjust the opacity for background.

• Border Opacity: Adjust the opacity for borders.

• Legend: Set to Yes to show legends.

• Legend Position: Set the legend's position (Top, Right, Bottom, Left).

• Legend Align: Set the legend's alignment (Start, Center, End).

• Tooltip: Set to Yes to show tooltips on hover.

• Refresh Chart: Manually refresh the chart to apply new settings or data.

• Animation: Controls whether your charts display animation.

Use these controls to tailor your chart, making it the perfect fit for your data visualization needs.

Happy charting!