Tickmarks with Text (React)

Wijmo's gauges allow you to show tickmarks along their faces using the showTicks and tickSpacing properties.

To add text to each tickmark, set the showTickText property to true. You can style the text using CSS as usual.

This example uses React.

app.jsx
index.html
app.css
Copy to CodeMine
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useState } from 'react'; import { GaugeDirection } from '@mescius/wijmo.gauge'; import { ComboBox } from '@mescius/wijmo.react.input'; import { RadialGauge, LinearGauge } from '@mescius/wijmo.react.gauge'; import './app.css'; const startAngles = [-90, -45, 0, 45, 90]; const sweepAngles = [-360, -270, -180, -90, 90, 180, 270, 360]; const tickSpacings = [25, 50, 100, 200, 250]; const directions = ['Left', 'Right', 'Up', 'Down']; function App() { const [startAngle, setStartAngle] = useState(startAngles[1]); const [sweepAngle, setSweepAngle] = useState(sweepAngles[6]); const [tickSpacing, setTickSpacing] = useState(tickSpacings[1]); const [direction, setDirection] = useState(GaugeDirection.Right); const isVertical = () => { return GaugeDirection[direction].match(/Up|Down/) != null; }; const handleGaugeInitialized = (gauge) => { gauge.value = 100; }; return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <RadialGauge style={{ height: '200px' }} min={0} max={500} showTicks={true} showTickText={true} showText={'Value'} isReadOnly={false} startAngle={startAngle} sweepAngle={sweepAngle} tickSpacing={tickSpacing} initialized={handleGaugeInitialized}/> </div> <div className="col-xs-6"> <label> startAngle{' '} <ComboBox itemsSource={startAngles} selectedItem={startAngle} selectedIndexChanged={(sender) => { setStartAngle(sender.selectedItem); }}> </ComboBox> </label> <label> sweepAngle{' '} <ComboBox itemsSource={sweepAngles} selectedItem={sweepAngle} selectedIndexChanged={(sender) => { setSweepAngle(sender.selectedItem); }}> </ComboBox> </label> <label> tickSpacing{' '} <ComboBox itemsSource={tickSpacings} selectedItem={tickSpacing} selectedIndexChanged={(sender) => { setTickSpacing(sender.selectedItem); }}> </ComboBox> </label> </div> </div> <div className="row"> <div className={'col-xs-6' + (isVertical() ? ' vertical' : '')}> <LinearGauge min={0} max={500} showTicks={true} showTickText={true} isReadOnly={false} direction={direction} tickSpacing={tickSpacing} initialized={handleGaugeInitialized}/> </div> <div className="col-xs-6"> <label> direction{' '} <ComboBox itemsSource={directions} selectedItem={GaugeDirection[direction]} selectedIndexChanged={(sender) => { const a = GaugeDirection[sender.selectedItem]; setDirection(parseInt(a)); }}> </ComboBox> </label> </div> </div> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React, { useState } from 'react'; import { GaugeDirection } from '@mescius/wijmo.gauge'; import { ComboBox } from '@mescius/wijmo.react.input'; import { RadialGauge, LinearGauge } from '@mescius/wijmo.react.gauge'; import './app.css'; const startAngles = [-90, -45, 0, 45, 90]; const sweepAngles = [-360, -270, -180, -90, 90, 180, 270, 360]; const tickSpacings = [25, 50, 100, 200, 250]; const directions = ['Left', 'Right', 'Up', 'Down']; function App() { const [startAngle, setStartAngle] = useState(startAngles[1]); const [sweepAngle, setSweepAngle] = useState(sweepAngles[6]); const [tickSpacing, setTickSpacing] = useState(tickSpacings[1]); const [direction, setDirection] = useState(GaugeDirection.Right); const isVertical = () => { return GaugeDirection[direction].match(/Up|Down/) != null; }; const handleGaugeInitialized = (gauge) => { gauge.value = 100; }; return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <RadialGauge style={{ height: '200px' }} min={0} max={500} showTicks={true} showTickText={true} showText={'Value'} isReadOnly={false} startAngle={startAngle} sweepAngle={sweepAngle} tickSpacing={tickSpacing} initialized={handleGaugeInitialized}/> </div> <div className="col-xs-6"> <label> startAngle{' '} <ComboBox itemsSource={startAngles} selectedItem={startAngle} selectedIndexChanged={(sender) => { setStartAngle(sender.selectedItem); }}> </ComboBox> </label> <label> sweepAngle{' '} <ComboBox itemsSource={sweepAngles} selectedItem={sweepAngle} selectedIndexChanged={(sender) => { setSweepAngle(sender.selectedItem); }}> </ComboBox> </label> <label> tickSpacing{' '} <ComboBox itemsSource={tickSpacings} selectedItem={tickSpacing} selectedIndexChanged={(sender) => { setTickSpacing(sender.selectedItem); }}> </ComboBox> </label> </div> </div> <div className="row"> <div className={'col-xs-6' + (isVertical() ? ' vertical' : '')}> <LinearGauge min={0} max={500} showTicks={true} showTickText={true} isReadOnly={false} direction={direction} tickSpacing={tickSpacing} initialized={handleGaugeInitialized}/> </div> <div className="col-xs-6"> <label> direction{' '} <ComboBox itemsSource={directions} selectedItem={GaugeDirection[direction]} selectedIndexChanged={(sender) => { const a = GaugeDirection[sender.selectedItem]; setDirection(parseInt(a)); }}> </ComboBox> </label> </div> </div> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tickmark Text</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
label { display: block; text-align: right; width: 300px; } label .wj-combobox { width: 120px; } .wj-gauge { margin: 4em auto; } .wj-radialgauge { width: 200px; } .wj-lineargauge { width: 400px; } .vertical .wj-lineargauge { height: 300px; width: 2em; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: 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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'react-dom/client': 'npm:react-dom/umd/react-dom.production.min.js', 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.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', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);