Heatmap data plotting

[workingbuddy10]

I am trying to plot some data on the heatmap, but even after trying multiple it is not working. I want to plot this data :

var data = [
  { Time: 1693812000000, Price: 226.25, label: "1x0x1",delta: 0},
  { Time: 1693812000000, Price: 226.5, label: "4x9x11", delta: -7 },
  { Time: 1693812000000, Price: 226.75, label: "3x8x8", delta: -5 },
  { Time: 1693812000000, Price: 226, label: "0x4x0", delta: 0 },
  { Time: 1693815600000, Price: 226.75, label: "0x2x13",  delta: -13 },
  { Time: 1693815600000, Price: 227, label: "2x6x22", delta: -20 },
  { Time: 1693815600000, Price: 227.25, label: "11x10x4",  delta: 7},
  { Time: 1693815600000, Price: 227.5, label: "10x9x7",delta: 3 },
  { Time: 1693815600000, Price: 227.75,label: "0x5x7",delta: -7 },
  { Time: 1693815600000, Price: 228, label: "0x7x28",delta: -28 }
];

It will be Time vs Price heatmap. It will be like at 1693812000000 time, & at 226.25 price. I want to show the label of the cell as "1x0x1". And lastly we can use the delta for the max & min color grading.

I don't need any legend too!

https://www.amcharts.com/demos/heat-map-with-legend/

[shishima123]

I have tried this before, you can refer to it

  heatmapSeries = mainPanel.series.push(
    am5xy.ColumnSeries.new(root, {
      name: 'Series',
      xAxis: dateAxis,
      yAxis: valueAxis,
      valueYField: 'price',
      valueXField: 'date',
      customValueField: 'amount',
      openValueYField: 'openPrice',
      stroke: am5.color('#000000')
    })
  )

  heatmapSeries.columns.template.setAll({
    width: am5.percent(100),
    templateField: 'strokeSettings'
  })

The data will look like this

[{
  date: candle.Date,
  price: candle.Price,
  openPrice: candle.Price - 10,
  amount: amount,
  strokeSettings: {
    fill: am5.color(0xff0000)
  }
}]

Regarding label in the cell, reference: https://www.amcharts.com/demos/stacked-bar-chart/

However, when using this method, the chart was very laggy, so I used another way. See this issue below https://github.com/amcharts/amcharts5/issues/1591

[workingbuddy10]

Thanks @shishima123 , for the help! I am trying to attach the heatmap with the individual candles! So if I scroll/zoom it should sync with it.

[shishima123]

yes, if you set xAxis, yAxis to coincide with the candle axis, it will be in sync with each other

[workingbuddy10]

Please It would be great if can help me with any working example!! @shishima123

This is one of your fiddle : https://jsfiddle.net/shishima/h940nf37/4/

[shishima123]

I updated my fiddle, you can check it https://jsfiddle.net/shishima/3c9fwvud/4/

[workingbuddy10]

thanks @shishima123 💯

[workingbuddy10]

By the way @shishima123 , the codepen helped a lot. But I was looking for something like this : #1704 issue images. Like a heatmap cell placed one above at price vs timestamp. Hope you got my point

[workingbuddy10]

so you know you know workaround related to this? @shishima123

[workingbuddy10]

@martynasma If you can help? To get the heatmap like cells stacked one above in the given fiddle !!

[martynasma]

This question was reviewed by amCharts staff and was determined neither a) bug nor b) simple question that can be answered without doing custom development or reviewing user code.

I'm sorry, but we won't be able to answer your question here.

If you have an amCharts support subscription, we suggest contacting our helpdesk. If you don't, you might consider acquiring one. For more details on procuring support please refer to this page.

[shishima123]

@workingbuddy10 so sorry, I'm afraid I can't help you. Your problem is not the same as mine