Set chart series marker properties - Shared with Script Lab

Chart series markers.yaml

name: Chart series markers
description: Set chart series marker properties
author: kbrandl
host: EXCEL
api_set: {}
script:
    content: |
        $("#setup").click(() => tryCatch(setup));
        $("#set-markers").click(() => tryCatch(setMarkers));

        async function setMarkers() {
            await Excel.run(async (context) => {
                let sheet = context.workbook.worksheets.getItem("Sample");
                let salesTable = sheet.tables.getItem("SalesTable");
                let dataRange = sheet.getRange("A1:E7");

                // Create an XY scatter chart.
                let chart = sheet.charts.add("XYScatterSmooth", dataRange, "auto");
                chart.title.text = "Bicycle Parts Quarterly Sales"; 
              
                let series = chart.series;
                let series0 = series.getItemAt(0);
                let series1 = series.getItemAt(1);
                let series2 = series.getItemAt(2);
                let series3 = series.getItemAt(3);

                // Set markers.
                series0.markerStyle = "Dash";
                series0.markerForegroundColor = "black";
                series1.markerStyle = "Star";
                series1.markerForegroundColor = "black";
                series2.markerStyle = "X";
                series2.markerSize = 12;
                series3.markerStyle = "Triangle";
                series3.markerBackgroundColor = "purple";

                await context.sync();
            });
        }

        async function setup() {
            await Excel.run(async (context) => {
                let sheet = await OfficeHelpers.ExcelUtilities
                    .forceCreateSheet(context.workbook, "Sample");
                let salesTable = sheet.tables.add('A1:E1', true);
                salesTable.name = "SalesTable";

                salesTable.getHeaderRowRange().values = [["Product", "Qtr1", "Qtr2", "Qtr3", "Qtr4"]];

                salesTable.rows.add(null, [
                    ["Frames", 5000, 3000, 544, 1377],
                    ["Saddles", 400, 1323, 876, 251],
                    ["Brake levers", 1200, 5766, 2456, 812],
                    ["Chains", 1550, 1088, 692, 253],
                    ["Mirrors", 225, 600, 923, 544],
                    ["Spokes", 6005, 7634, 4589, 765]
                ]);

                if (Office.context.requirements.isSetSupported("ExcelApi", 1.7)) {
                    sheet.getUsedRange().format.autofitColumns();
                    sheet.getUsedRange().format.autofitRows();
                }

                sheet.activate();

                await context.sync();
            });
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: |-
        <section class="ms-font-m">
            <p>This sample shows how to set chart series marker properties.</p>
        </section>

        <section class="setup ms-font-m">
            <h3>Set up</h3>
            <button id="setup" class="ms-Button">
                <span class="ms-Button-label">Add sample data</span>
            </button>
        </section>

        <section class="samples ms-font-m">
            <h3>Try it out</h3>
            <button id="set-markers" class="ms-Button">
                <span class="ms-Button-label">Set marker properties</span>
            </button>
        </section>
    language: html
style:
    content: |
        section.samples {
            margin-top: 20px;
        }

        section.samples .ms-Button, section.setup .ms-Button {
            display: block;
            margin-bottom: 5px;
            margin-left: 20px;
            min-width: 80px;
        }
    language: css
libraries: |-
    https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
    https://appsforoffice.microsoft.com/lib/beta/hosted/office.d.ts

    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    core-js@2.4.1/client/core.min.js
    @types/core-js

    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts

    jquery@3.1.1
    @types/jquery