Legends and Titles

The FlexChart control has header, footer and the Axis title properties that you can use to include more information in your charts. You can also customize these sections of the chart using CSS.

Learn about FlexChart | Legends and Titles Documentation | FlexChart API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { isArray, toggleClass } from '@grapecity/wijmo'; import { FlexChart, Palettes } from '@grapecity/wijmo.chart'; import { ComboBox } from '@grapecity/wijmo.input'; import { getData, getComboData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create a chart let theChart = new FlexChart('#theChart', { itemsSource: getData(), bindingX: 'country', legend: { position: 'Right' }, series: [ { binding: 'sales', name: 'Sales' }, { binding: 'expenses', name: 'Expenses' }, { binding: 'downloads', name: 'Downloads' } ] }); theChart.palette = getRandomPalette(); // toggle custom styles document.getElementById('customTitles').addEventListener('click', function (e) { toggleClass(theChart.hostElement, 'custom-titles', e.target.checked); }); // toggle custom legend styles document.getElementById('customLegend').addEventListener('click', function (e) { toggleClass(theChart.hostElement, 'custom-legend', e.target.checked); }); // change legend position var legendPosition = new ComboBox('#legendPosition', { itemsSource: getComboData(), textChanged: function (s, e) { theChart.legend.position = s.text; }, text: 'Left' }); // // customize chart titles let header = new ComboBox('#header', { textChanged: (s) => theChart.header = s.text }); let footer = new ComboBox('#footer', { textChanged: (s) => theChart.footer = s.text }); let xTitle = new ComboBox('#xTitle', { textChanged: (s) => theChart.axisX.title = s.text }); let yTitle = new ComboBox('#yTitle', { textChanged: (s) => theChart.axisY.title = s.text }); // // initialize titles header.text = 'My Great Chart'; footer.text = 'powered by Wijmo\'s FlexChart'; xTitle.text = 'country'; yTitle.text = 'values/units'; } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(Palettes).filter(prop => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Legends and Titles</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label for="header">Header: </label> <div id="header"></div><br> <label for="footer">Footer: </label> <div id="footer"></div><br> <label for="xTitle">X-Axis Title: </label> <div id="xTitle"></div><br> <label for="yTitle">Y-Axis Title: </label> <div id="yTitle"></div> <div> <label for="customTitles">Custom Titles: </label> <input id="customTitles" type="checkbox" checked="true"> </div> <div> <label for="customLegend">Custom Legend: </label> <input id="customLegend" type="checkbox" checked="true"> </div> <label for="legendPosition">Legend Position: </label> <div id="legendPosition"></div> <div class="custom-titles custom-legend" id="theChart"></div> </div> </body> </html>
// create some random data export function getData() { let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; // for (let i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000) }); } // return data; } // export function getComboData() { return 'None,Top,Bottom,Left,Right'.split(','); }
.wj-flexchart { height: 300px; } label { width: 150px; text-align: right; } .wj-control { margin-bottom: 3px; } /* custom color for all titles */ .custom-titles.wj-flexchart .wj-title { fill: #42357C; } /* custom size/weight for header */ .custom-titles.wj-flexchart .wj-header .wj-title { font-size: 120%; font-weight: bold; } /* custom size/weight for footer */ .custom-titles.wj-flexchart .wj-footer .wj-title { font-size: 90%; font-weight: bold; } /* custom style for axis-x/y titles */ .custom-titles.wj-flexchart .wj-axis-x .wj-title, .custom-titles.wj-flexchart .wj-axis-y .wj-title{ font-size: 75%; font-style: normal; opacity: .5; } .wj-flexchart .wj-legend .wj-label { opacity: .9; font-size: 80%; } /* custom color for legend box */ .custom-legend.wj-flexchart .wj-legend > rect { fill: #003000; } /* custom color for legend labels */ .custom-legend.wj-flexchart .wj-legend .wj-label { fill: white; font-style: italic; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);