Step 4.1: Customize the style

Under the “Customize” option, select “Chart style.”. In the unfolded menu, you can change the background color, the font, and the color of the chart’s border.

Once you are satisfied with your changes, click on “Reset layout” to save them.

Step 4.2: Customize the chart and axis title

Under the “Customize” option, select “Chart & axis titles.” In the unfolded menu, click on the first drop-down arrow to select which title you want to customize. You can choose from changing the chart’s title or subtitle, or even the horizontal or the vertical axis titles.

Once you’ve decided which title you want to change, you can field under “Title text” to type a new title. You can also change the title’s font, size, format, and color.

Step 4.3: Customize the series

Under the “Customize” option, select “Series.” There, you can change the appearance of any of the series that your XY graph is based on. In our example, we chose a series called “Exam points.”

In the Format section, you can then change the appearance of the points in the graph by changing their color, opacity, size, and shape. Making these changes will result in real-time changes in your XY graph.

Step 4.4: Customize the axis

Under the “Customize” option, select either “Horizontal axis” or “Vertical axis.” There, you can customize the axis label’s font, size, format, and color.

Additionally, you can check the “Reverse axis” checkbox to reverse the order of the information in the axis, so that the first data appears on the right or top of the XY graph. You can also use the “Slant labels” option to customize the appearance of data by slanting it to the desired angle.

Step 4.5: Customize the gridelines and ticks

Under the “Customize” option, scroll down and select “Gridlines and ticks. Then click on the drop-down arrow to select the axis you want to customize. In this example, we’ll select the vertical axis.

Next, customize the input fields named "Major spacing type," "Major step," "Minor spacing type," and "Minor count." Here’s what these terms mean:

• Major spacing type and Minor spacing type: The type of spacing used for the gridlines and tick marks on the vertical axis. They offer a choice between "Step" and "Count.”
• Major count and Minor count: The distance between the gridlines and tick marks on the axis. You can either choose “Auto,” “None,” or any number between 1 and 10.

In our example, we selected major and minor spacing as “Count” and choose 6 as the major count and 2 as the minor count.

Step 5.1: Download your XY graph

In the drop-down menu that appears, select the “Download chart” option, then choose either PNG, PDF or SVG format to save your graph on your computer.

Step 5.2 Publish your XY graph

To publish your XY graph to the web, click on “Publish chart” in the drop-down menu that appears after clicking the three dots in the graph. You will then be asked if you’d like to publish your graph as a link or to embed it.

Step 5.3: Copy your XY graph

If you’d like to copy your XY graph into another document, click on “Copy chart” in the drop-down menu that appears after clicking the three dots in the graph. On the document where you want to save your graph, just use the right-click to paste it.

Step 5.4: Move your XY graph to its own sheet

In the drop-down menu that appears after clicking the three dots in your XY graph, you can click on “Move to own sheet.” This will result in your XY graph being moved to another sheet in the same Google Sheets file.

Step 9.1: Select a Google Account

A new window or tab will open asking you to login to or select your Google Account.

Step 9.2 Grant additional access

In this step, you’ll need to grant Softr access to a set of features. Click on "Select all" and then hit “Continue".

Step 10.1: Select a data source

On the right side of the screen, Softr will show you all the block settings. In the tab "SOURCE," click on the "Source" dropdown and choose your data source. This will be the Google account where your data is stored.

Step 10.2: Select the Google Sheets file

Now, you will need to select the spreadsheet and the sheet where your data is by clicking on the "Document" and "Sheet" options.

Step 11.1: Change title and subtitle

In the FEATURES tab, you can change the title and subtitle of your XY graph.

Step 11.2: Customize the style

In the STYLES tab, you can customize the paddings to suit your preference.

Step 11.3: Customize Borders

Still, under the STYLES tab, you can also customize your graph’s background color and borders.