Show multiple colors and values in a single heatmap square cell

Question

Hello,I would like to ask you, if there are any possible way to show multiple colors and values in a single heatmap square cell? I know that the bubble cells are able to display multiple values in its tooltip, however I can't find any examples displaying the same or similar tooltip for the square cells.Best Regards,Ignacy

Sowmiya Padmanaban · Accepted Answer

Hi Ignacy Mielniczek,  
 
In Heatmap component, we can’t show the single tooltip for multiple cells because tooltip is generated for each cells in Heatmap component. 
 
However, you can show multiple data content in Tooltip of single cell by using tooltipRender event. We have provided a template support for Tooltip in Heatmap component. 
 
Please, refer the below document link 
 
https://ej2.syncfusion.com/angular/documentation/heatmap-chart/how-to/tooltip-template/ 
 
If you render the N number of data in datasource of Heatmap component and use the data in tooltipRender event. 
 
Please, refer the below code snippet. 
 




  public jsonCellData: Object = [ 
    { 
      rowid: "France", 
      columnid: "2010", 
      value: "77.6", 
      smartphones: "20", 
      laptops: "67" 
    }, 
    { 
      rowid: "France", 
      columnid: "2011", 
      value: "79.4", 
      smartphones: "20", 
      laptops: "67" 
    }] 
  dataSource: Object = this.jsonCellData; 
  dataSourceSettings: Object = { 
    isJsonData: true, 
    adaptorType: "Cell", 
    xDataMapping: "rowid", 
    yDataMapping: "columnid", 
    valueMapping: "value" 
  }; 
 
tooltipRender(args) { 
    var datasource = args.heatmap.dataSource.find( 
      element => element.rowid == args.xLabel && element.columnid == args.yLabel 
    ); 
    args.content = [ 
      "smartphones : " + 
        datasource.smartphones + 
        " | " + 
        " laptops :" + 
        datasource.laptops + 
        " | Ylablel : " + 
        args.yLabel + 
        " | X lablel : " + 
        args.xLabel + 
        " : $ " + 
        (args.value as number) / 10 + 
        "K" 
    ]; 
  } 
 
 
Please, refer the below sample link. 
 
https://stackblitz.com/edit/angular-qxxym9-bms2ao?file=app.component.ts 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P

Sowmiya Padmanaban · Answer

Hi Ignacy Mielniczek,  
 
Greetings from Syncfusion support. 
 
Query 1- I would like to ask you, if there are any possible way to show multiple colors and values in a single heatmap square cell?  
 
We can’t show multiple colors for single Heatmap cell. Color of the cell is applied based on the cell value. When the cell value is 60, corresponding color mentioned in the paletteSettings is displayed in the UI of Heatmap component. 
 
Please, refer the below code snippet. 
 




 public paletteSettings: Object = { 
    palette: [ 
      { startValue: 0, endValue: 20, minColor: "#FFFFDA", maxColor: "#EDF8B6" }, 
      { 
        startValue: 20, 
        endValue: 50, 
        minColor: "#CAE8B4", 
        maxColor: "#78D1BD" 
      }, 
      { 
        startValue: 50, 
        endValue: 100, 
        minColor: "#36BCC6", 
        maxColor: "#208FC6" 
      } 
    ] 
  }; 
 
 
However, we can set multiple colors of complete Heatmap component using PaletteSettings. Please, refer the below link for paletteSettings of Heatmap component. 
 
https://ej2.syncfusion.com/angular/documentation/heatmap-chart/palette/ 
 
Please refer the sample link below: https://stackblitz.com/edit/angular-xc6e43-n11nrc?file=app.component.ts 
 
If we misunderstood your requirement, could you please share the screenshot for your expected requirement.   
 
Query 2-  I know that the bubble cells are able to display multiple values in its tooltip, however I can't find any examples displaying the same or similar tooltip for the square cells. 
 
You can customize the tooltip by using TootipRender event of Heatmap component. Refer the below link. 
 
https://ej2.syncfusion.com/angular/demos/#/material/heatmap-chart/tooltip-template  
 
Please refer the below links for the Heatmap component. 
 
UG Documentation-  https://ej2.syncfusion.com/angular/documentation/heatmap-chart/working-with-data/ 
 
Demo Link- https://ej2.syncfusion.com/angular/demos/#/material/heatmap-chart/default 
 
API reference- https://ej2.syncfusion.com/angular/documentation/api/heatmap/ 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P

Ignacy Mielniczek · Answer

Hi Sowmiya Padmanaban,Thank you very much for a quick response.Best Regards,Ignacy

Sowmiya Padmanaban · Answer

Hi Ignacy,  
  
Based on your update, we suspect that our provided solution meets your requirement. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P

Ignacy Mielniczek · Answer

Hi Sowmiya Padmanaban,I have looked and checked the examples and the documentations which you have sent me. Unfortunately, I couldn't find any resolution to my existing problem.So in this case, I am attaching an image which will hopefully illustrate my problem.Best Regards,Ignacy

Sowmiya Padmanaban · Answer

Hi Ignacy Mielniczek,  
 
As mentioned in our previous update, we cannot use multiple colors and values in a single heatmap square cell.  We can only display the single data in a cell, this is the default behaviour of the component. 
 
However, you can achieve the similar UI by using MultilevelLabels property of Heatmap component. 
 
https://ej2.syncfusion.com/angular/demos/#/material/heatmap-chart/multi-level-labels 
 
Please, refer the below screenshot. 
 
  
 
Please, refer the sample link below. 
 
https://stackblitz.com/edit/angular-s65rdp?file=app.component.ts 
 
In the above sample, Tooltip is rendered for each cell. This is the default behaviour of the component. Could you please share the details, if the above sample meet your requirement? If yes, we will consider showing the tooltip details for entire row in a single tooltip. 
 
Could you please let us know the details, if the above solution meets your requirement? 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P

Ignacy Mielniczek · Answer

Hi again Sowmiya Padmanaban,Unfortunately, the idea of grouping of multiple cells are not meeting our requirements. However, it might work only if it is possible to show a single Tooltip Box for each grouped cells.If it is not possible, then I would like to ask you if it is possible to show N number of values besides the values of X and Y axes in single cell's Tooltip Box. Please see the image below.Best Regards,Ignacy

Ignacy Mielniczek · Answer

Hi Sowmiya Padmanaban,The solution which you have provided is finally meeting our requirements. Thank you very much again! :)Best Regards,Ignacy

Sowmiya Padmanaban · Answer

Hi Ignacy,  
  
We are happy to hear that our provided solution resolved your reported problem. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P

Ignacy Mielniczek · Answer

Hi Sowmiya Padmanaban,I have one more question regarding the tooltips in heatmap chart component. Is there any possible way to display multiline tooltips or add newlines to strings which are being displayed in tooltips? I cannot find any samples or any information in the documentation.Best regards,Ignacy

Sowmiya Padmanaban · Answer

Hi Ignacy Mielniczek, We have provided template support for Tooltip in Heatmap component. You can achieve your requirement by using this property. Please, refer to the below link. https://ej2.syncfusion.com/angular/documentation/heatmap-chart/how-to/tooltip-template/ To render the tooltip in Multiline, please refer to the below code snippet. tooltipRender(args) { var datasource = args.heatmap.dataSource.find( element => element.rowid == args.xLabel && element.columnid == args.yLabel ); args.content = [ "SmartPhones " + " : " + datasource.smartphones + "
" + "Laptops " + " : " + datasource.laptops + "
" + "YLabel " + " : " + args.yLabel + "
" + "Value " + " : " + (args.value as number) / 10 ]; } Please, refer to the below screenshot. Sample link: https://stackblitz.com/edit/angular-qxxym9-ys3m7x?file=app.component.ts Please let us know, if you need any further assistance. Regards, Sowmiya.P

Ignacy Mielniczek · Answer

Hi Sowmiya Padmanaban,Thank you very much again for a quick response. Yes, the solution which you have sent resolves the issue which I was facing.Best Regards,Ignacy

Sowmiya Padmanaban · Answer

Hi Ignacy,  
  
We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P