Legend

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

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
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);