Legend

You can customize the chart’s legend to better highlight which symbol or color represents each data series.

Description
app.vue
index.html
Copy to CodeMine

The chart legend supports the following customization:

  • Visible: the legend visibility.
  • Position: top, right, left, bottom, topRight.
  • Background: color, transparency.
  • Text: font family, font size, color.
  • Border: color, transparency, width.
  • Overlapping: whether the legend display with overlapping plotArea.
  • Layout: x, y, width, height.

You can customize the legend using the following code:

    var legend = chart.legend();
    legend.visible = "orange";
    legend.position = GC.Spread.Sheets.Charts.LegendPosition.top;
    legend.backColor = "orange";
    legend.backColorTransparency = 0.8;

    legend.fontFamily = "Arial";
    legend.fontSize = 9;
    legend.color = "green";

    legend.borderStyle.color = "green";
    legend.borderStyle.transparency = 0.3;
    legend.borderStyle.width = 3;

    legend.showLegendWithoutOverlapping = false;
    legend.layout= {
        x: 0.2,
        y: 0.5,
        width: 0.4,
        height: 0.2 
    }   

    chart.legend(legend);
The chart legend supports the following customization: Visible: the legend visibility. Position: top, right, left, bottom, topRight. Background: color, transparency. Text: font family, font size, color. Border: color, transparency, width. Overlapping: whether the legend display with overlapping plotArea. Layout: x, y, width, height. You can customize the legend using the following code:
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet /> </gc-spread-sheets> <div class="options-container"> <p>Change the properties below then press the Set button to apply these changes.</p> <div class="option-row"> <label for="visible">Visible</label> <input type="checkbox" id="visible" v-model="visible" /> </div> <div class="option-row" id> <label for="position">Position</label> <select id="position" v-model="position"> <option value="1">top</option> <option value="2">right</option> <option value="3">left</option> <option value="4">bottom</option> <option value="5">topRight</option> </select> </div> <div class="option-row"> <input type="checkbox" id="showLegendWithoutOverlapping" v-model="showLegendWithoutOverlapping" /> <label style="display:inline" for="showLegendWithoutOverlapping">Show the legend without overlapping the chart</label> </div> <div class="option-row" id> <label for="backColor">Back Color</label> <input type="text" id="backColor" v-model="backColor" /> </div> <div class="option-row" id> <label for="backColorTransparency">Back Color Transparency</label> <input type="number" id="backColorTransparency" step="0.1" min="0" max="1" v-model="backColorTransparency" /> </div> <div class="option-row"> <label for="layoutX">Legend X(% of Chart)</label> <input type="number" id="layoutX" step="0.01" min="0" max="1" v-model="layoutX" /> </div> <div class="option-row"> <label for="layoutY">Legend Y(% of Chart)</label> <input type="number" id="layoutY" step="0.01" min="0" max="1" v-model="layoutY" /> </div> <div class="option-row"> <label for="layoutWidth">Legend Width(% of Chart)</label> <input type="number" id="layoutWidth" step="0.01" min="0" max="1" v-model="layoutWidth" /> </div> <div class="option-row"> <label for="layoutHeight">Legend Height(% of Chart)</label> <input type="number" id="layoutHeight" step="0.01" min="0" max="1" v-model="layoutHeight" /> </div> <hr /> <div class="option-row" id> <label for="fontFamily">Font Family</label> <input type="text" id="fontFamily" v-model="fontFamily" /> </div> <div class="option-row" id> <label for="fontSize">Font Size</label> <input type="number" id="fontSize" step="1" min="0" max="100" v-model="fontSize" /> </div> <div class="option-row" id> <label for="color">Color</label> <input type="text" id="color" v-model="color" /> </div> <div class="option-row" id> <label for="transparency">Transparency</label> <input type="number" id="transparency" step="0.1" min="0" max="1" v-model="transparency" /> </div> <hr /> <div class="option-row" id> <label for="border-color">Border Color:</label> <input type="text" id="border-color" v-model="borderColor" /> </div> <div class="option-row" id> <label for="border-transparency">Border Transparency:</label> <input type="number" id="border-transparency" step="0.1" min="0" max="1" v-model="borderTransparency" /> </div> <div class="option-row" id> <label for="border-width">Border Width:</label> <input type="number" id="border-width" step="1" min="0" max="100" v-model="borderWidth" /> </div> <div class="option-row"> <input type="button" id="apply" value="Set" @click="applySetting" /> </div> </div> </div> </template> <script setup> import { ref } from 'vue'; import '@mescius/spread-sheets-vue'; import GC from '@mescius/spread-sheets'; import '@mescius/spread-sheets-shapes'; import '@mescius/spread-sheets-charts'; const spread = ref(null); const visible = ref(true); const position = ref('4'); const showLegendWithoutOverlapping = ref(true); const layoutX = ref(undefined); const layoutY = ref(undefined); const layoutWidth = ref(undefined); const layoutHeight = ref(undefined); const backColor = ref('#FF0000'); const backColorTransparency = ref('0.7'); const color = ref('#00FF00'); const transparency = ref(1); const fontFamily = ref('Calibri'); const fontSize = ref(1); const borderColor = ref('#00FF00'); const borderWidth = ref(1); const borderTransparency = ref(1); const initSpread = (spreadInstance) => { spread.value = spreadInstance; spreadInstance.setSheetCount(2); const sheet = spreadInstance.getSheet(0); sheet.suspendPaint(); const dataArray = [ ['', 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ['2014', 0.4966, 0.1801, 0.2455, 0.047, 0.0, 0.015, 0.0158], ['2015', 0.5689, 0.156, 0.1652, 0.0529, 0.0158, 0.022, 0.0192], ['2016', 0.623, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225], ['2017', 0.636, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246], ]; sheet.setArray(0, 0, dataArray); const chart = sheet.charts.add( 'Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 120, 480, 270, 'A1:D5', GC.Spread.Sheets.Charts.RowCol.columns, ); chart.title({ text: 'Chart Legend', }); const legend = chart.legend(); legend.borderStyle.color = 'green'; legend.borderStyle.width = 3; legend.fontSize = 9; legend.backColor = 'orange'; legend.backColorTransparency = 0.8; chart.legend(legend); sheet.resumePaint(); initEvent(); }; const initEvent = () => { spread.value.bind(GC.Spread.Sheets.Events.FloatingElementSelected, () => { const sheet = spread.value.getActiveSheet(); const chart = getActiveChart(sheet); if (chart) { readSetting(chart); } }); }; const readSetting = (chart) => { const legend = chart.legend(); visible.value = legend.visible; position.value = legend.position; showLegendWithoutOverlapping.value = legend.showLegendWithoutOverlapping !== false; backColor.value = legend.backColor; backColorTransparency.value = legend.backColorTransparency; color.value = legend.color; fontFamily.value = legend.fontFamily; fontSize.value = legend.fontSize; borderColor.value = legend.borderStyle.color; borderWidth.value = legend.borderStyle.width; borderTransparency.value = legend.borderStyle.transparency; if (legend.layout && legend.layout.x) { layoutX.value = legend.layout.x; } if (legend.layout && legend.layout.y) { layoutY.value = legend.layout.y; } if (legend.layout && legend.layout.width) { layoutWidth.value = legend.layout.width; } if (legend.layout && legend.layout.height) { layoutHeight.value = legend.layout.height; } }; const applySetting = () => { const sheet = spread.value.getActiveSheet(); const chart = getActiveChart(sheet); if (!chart) return; const legend = { visible: visible.value, position: parseInt(position.value, 10), showLegendWithoutOverlapping: Boolean(showLegendWithoutOverlapping.value), backColor: backColor.value, backColorTransparency: Number(backColorTransparency.value), color: color.value, fontFamily: fontFamily.value, fontSize: parseInt(fontSize.value, 10), borderStyle: { color: borderColor.value, width: parseInt(borderWidth.value, 10), transparency: Number(borderTransparency.value), }, layout: { x: layoutX.value !== undefined ? Number(layoutX.value) : undefined, y: layoutY.value !== undefined ? Number(layoutY.value) : undefined, width: layoutWidth.value !== undefined ? Number(layoutWidth.value) : undefined, height: layoutHeight.value !== undefined ? Number(layoutHeight.value) : undefined, }, }; chart.legend(legend); }; const getActiveChart = (sheet) => { let activeChart = null; sheet.charts.all().forEach((chart) => { if (chart.isSelected()) { activeChart = chart; } }); return activeChart; }; </script> <style scoped> .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; } .option-row { padding-bottom: 5px; } label { display: inline-block; } input { padding: 1px 8px; box-sizing: border-box; width: 100%; } select { width: 100%; } input[type=checkbox] { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> var System = SystemJS; System.import("./src/app.js"); System.import('$DEMOROOT$/en/lib/vue3/license.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.js", 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-en': 'npm:@mescius/spread-sheets-resources-en/index.js', '@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js', }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);