jqxtreemap nice legend show

[youngmehranParticipant]

Hi
i,m using jqxtreemap that i found in this link :

https://www.jqwidgets.com/react/react-treemap/index.htm#https://www.jqwidgets.com/react/react-treemap/react-treemap-defaultfunctionality.htm

in my react project ,

and i like to show a legend like this under my tree map component :

<div class='my-legend'>
<div class='legend-title'>The Title or Explanation of your Map</div>
<div class='legend-scale'>
  <ul class='legend-labels'>
    <li><span style='background:#8DD3C7;'></span>One</li>
    <li><span style='background:#FFFFB3;'></span>Two</li>
    <li><span style='background:#BEBADA;'></span>Three</li>
    <li><span style='background:#FB8072;'></span>Four</li>
    <li><span style='background:#80B1D3;'></span>etc</li>
  </ul>
</div>
<div class='legend-source'>Source: <a href="#link to source">Name of source</a></div>
</div>

<style type='text/css'>
  .my-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
    }
  .my-legend .legend-scale ul {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
    float: left;
    list-style: none;
    }
  .my-legend .legend-scale ul li {
    font-size: 80%;
    list-style: none;
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 2px;
    }
  .my-legend ul.legend-labels li span {
    display: block;
    float: left;
    height: 16px;
    width: 30px;
    margin-right: 5px;
    margin-left: 0;
    border: 1px solid #999;
    }
  .my-legend .legend-source {
    font-size: 70%;
    color: #999;
    clear: both;
    }
  .my-legend a {
    color: #777;
    }
</style>

how can i do that ?

tnx in advance

[Yavor DashevParticipant]

Hi youngmehran,

Unfortunately the jqxTreeMap doesn’t support this functionality by default.
However I have made a workaround and you can see the code snippet below to see one of the possible solutions:

//In you App.tsx file

import * as React  from 'react';
import JqxTreeMap, { ITreeMapProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtreemap';

class App extends React.PureComponent<{}, ITreeMapProps> {
    private myTreeMap = React.createRef<JqxTreeMap>(); 
     addlegend =  () =>{
        setTimeout(() => {
            const labelElement = document.getElementsByClassName('jqx-treemap-legend-label')
                const labelContent = '

                <div class='my-legend'>
                <div class='legend-title'>The Title or Explanation of your Map</div>
                <div class='legend-scale'>
                <ul class='legend-labels'>
                    <li><span style='background:#8DD3C7;'></span>One</li>
                    <li><span style='background:#FFFFB3;'></span>Two</li>
                    <li><span style='background:#BEBADA;'></span>Three</li>
                    <li><span style='background:#FB8072;'></span>Four</li>
                    <li><span style='background:#80B1D3;'></span>etc</li>
                
                </div>
                <div class='legend-source'>Source: <a href="#link to source">Name of source</a></div>
                </div>
                '
                
            labelElement[0].innerHTML= labelContent

                }, 300);
    }
    constructor(props: {}) {
      super(props);
  
  
   
      this.state = {
        colorRanges: [
            { "color": "#de290b", "max": 1454040000, "min": 1254040000 },
            { "color": "#de440c", "max": 1254039999, "min": 1054040000 },
            { "color": "#ea7707", "max": 1054040000, "min": 300000000 },
            { "color": "#ee8a06", "max": 460000000, "min": 210000000 },
            { "color": "#f19505", "max": 209999999, "min": 190000000 },
            { "color": "#f6a903", "max": 189999999, "min": 180000000 },
            { "color": "#f8b203", "max": 179999999, "min": 160000000 },
            { "color": "#fabb02", "max": 159999999, "min": 140000000 },
            { "color": "#fbbf01", "max": 139999999, "min": 100000000 },
            { "color": "#fbcd01", "max": 99999999, "min": 90000000 },
            { "color": "#fbde33", "max": 89999999, "min": 10000000 }
        ],
        renderCallbacks: {
            '*': (element: any, data: any) => {
                element.css({
                    color: '#ffffff'
                });
                element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '%</span>');
                return true;
            }
        },
        source: [{
            color: '#37c837',
            label: 'Chrome',
            value: 44.06
        },
        {
            color: '#0066ff',
            label: 'Internet Explorer',
            value: 22.08
        },
        {
            color: '#ed7b0f',
            label: 'Firefox',
            value: 18.17
        },
        {
            color: '#818181',
            label: 'Others',
            value: 9.07
        },
        {
            color: '#9a0900',
            label: 'Opera',
            value: 3.38
        },
        {
            color: '#4dbff1',
            label: 'Safari',
            value: 3.24
        }]
    }
    this.addlegend()
    }
    
    public render() {
      return (
          <div className='treeMapContainer'>
        <JqxTreeMap ref={this.myTreeMap} 
          source={this.state.source} 
          colorRange={50} 
       
          legendPosition={{x: 20, y: -150}}
          legendScaleCallback={this.state.legendScaleCallback}
          colorMode={'autoColors'}
        />
        </div>
      );
    }
  }
export default App;

//In you CSS file

.jqx-treemap-legend-table,
.jqx-treemap-legend-values{
  display: none;
}
.jqx-treemap-legend{
  background-color: white!important;
  color: black;
}
.jqx-treemap-legend-label{
  color: black!important;
}
.treeMapContainer{
  display: inline-block;
  border: 1px solid grey;
  padding: 10px 10px 200px 10px;
}
.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
  }
.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
  }
.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 18px;
  margin-bottom: 2px;
  }
.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
  }
.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
  }
.my-legend a {
  color: #777;
  }

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts