Search results

Legend label customization in React HeatMap component

You can change the legend label using the legendRender client-side event. You can also hide the legend label using this client-side event.

Source
Preview
index.tsx
index.jsx
import * as React from "react";
import * as ReactDOM from 'react-dom';
import { HeatMapComponent, Inject, Legend, ILegendRenderEventArgs } from '@syncfusion/ej2-react-heatmap';

class App extends React.Component {
    private heatmapData: any [] = [
        [73000, 39000, 26000, 39000, 94000, 0],
        [93000, 58000, 53000, 38000, 26000, 68000],
        [99000, 28000, 22000, 4000, 66000, 9000],
        [14000, 26000, 97000, 69000, 69000, 3000],
        [7000, 46000, 47000, 47000, 88000, 6000],
        [41000, 55000, 73000, 23000, 30000, 79000],
        [56000, 69000, 21000, 86000, 3000, 33000],
        [45000, 7000, 53000, 81000, 95000, 79000],
        [60000, 77000, 74000, 68000, 88000, 51000],
        [25000, 25000, 10000, 12000, 78000, 14000],
        [25000, 56000, 55000, 58000, 12000, 82000],
        [74000, 33000, 88000, 23000, 86000, 59000]];

    public legendRender: EmitType<ILegendRenderEventArgs> = (args: ILegendRenderEventArgs): void => {
        if(args.text=='25,000' || args.text=='50,000'|| args.text=='99,000'){
            args.text = args.text.replace(/,/, "");
            args.text = `${parseInt(args.text/1000)}` + "k "+"$";
        } else {
            args.cancel=true;
        }
    };

    render() {
    return ( <HeatMapComponent id='heatmap'
        titleSettings = { {
        text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        } }
        xAxis = { {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        } }
        yAxis = { {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        } }
        cellSettings = { {
            showLabel: false
        } }
        paletteSettings = { {
            palette: [
            { value: 0, color: '#C2E7EC' },
            { value: 25000, color: '#AEDFE6' },
            { value: 50000, color: '#9AD7E0' },
            { value: 75000, color: '#72C7D4' },
            { value: 99000, color: '#5EBFCE' },
        ],
            type: 'Gradient'
        } }

        legendRender={this.legendRender}
        dataSource={this.heatmapData}>
        <Inject services={[Legend]} />
            </HeatMapComponent> );
    }
}
ReactDOM.render(<App />, document.getElementById('heatmap'));
import * as React from "react";
import * as ReactDOM from 'react-dom';
import { HeatMapComponent, Inject, Legend } from '@syncfusion/ej2-react-heatmap';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.heatmapData = [
            [73000, 39000, 26000, 39000, 94000, 0],
            [93000, 58000, 53000, 38000, 26000, 68000],
            [99000, 28000, 22000, 4000, 66000, 9000],
            [14000, 26000, 97000, 69000, 69000, 3000],
            [7000, 46000, 47000, 47000, 88000, 6000],
            [41000, 55000, 73000, 23000, 30000, 79000],
            [56000, 69000, 21000, 86000, 3000, 33000],
            [45000, 7000, 53000, 81000, 95000, 79000],
            [60000, 77000, 74000, 68000, 88000, 51000],
            [25000, 25000, 10000, 12000, 78000, 14000],
            [25000, 56000, 55000, 58000, 12000, 82000],
            [74000, 33000, 88000, 23000, 86000, 59000]
        ];
        this.legendRender = (args) => {
            if (args.text == '25,000' || args.text == '50,000' || args.text == '99,000') {
                args.text = args.text.replace(/,/, "");
                args.text = `${parseInt(args.text / 1000)}` + "k " + "$";
            }
            else {
                args.cancel = true;
            }
        };
    }
    render() {
        return (<HeatMapComponent id='heatmap' titleSettings={{
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        }} xAxis={{
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
        }} yAxis={{
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        }} cellSettings={{
            showLabel: false
        }} paletteSettings={{
            palette: [
                { value: 0, color: '#C2E7EC' },
                { value: 25000, color: '#AEDFE6' },
                { value: 50000, color: '#9AD7E0' },
                { value: 75000, color: '#72C7D4' },
                { value: 99000, color: '#5EBFCE' },
            ],
            type: 'Gradient'
        }} legendRender={this.legendRender} dataSource={this.heatmapData}>
        <Inject services={[Legend]}/>
            </HeatMapComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('heatmap'));