Hi all,
I have been using IGDATACHART from quite some time. May I know how to display values on top of the columns in the igdatachart?
Thanks in Advance,
Pavan
Hi Pavan, The best way to do that is probably to use a custom marker template to display the text value. You can do that as below:
$("#container").igDataChart({ width: "500px", height: "500px", dataSource: currData, crosshairVisibility: "visible", axes: [{ name: "xAxis", type: "categoryX", label: "Label", interval: 1 }, { name: "yAxis", type: "numericY", labelTextColor: "blue", }], series: [{ name: "series1", title: "Test Series", type: "column", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "Value", markerTemplate: { measure: function (measureInfo) { var cont = measureInfo.context; var data = measureInfo.data; var name = "null"; if (data.item() != null) { name = data.item().Value.toString(); } var height = cont.measureText("M").width; var width = cont.measureText(name).width; measureInfo.width = width; measureInfo.height = height; }, render: function (renderInfo) { var ctx = renderInfo.context, radius; if (renderInfo.isHitTestRender) { ctx.fillStyle = renderInfo.data.actualItemBrush().fill(); } else { ctx.fillStyle = "black"; } var data = renderInfo.data; var name = data.item().Value.toString(); var halfWidth = renderInfo.availableWidth / 2.0; var halfHeight = renderInfo.availableHeight / 2.0; var x = renderInfo.xPosition - halfWidth; var y = renderInfo.yPosition - ((halfHeight * 2.0) + 5.0); if (y < 0) { y += (halfHeight * 4.0); } if (renderInfo.isHitTestRender) { ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight); } else { ctx.textBaseline = "top"; ctx.fillText(name, x, y); } } } }], horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate" });
We are providing a simplified way of providing text markers in 12.2 that would reduce the amount of code required here. Hope this helps! -Graham
Hi Graham,
We tried provided template with Scatter Series and Bubble Series and it shows text but marker disappeared in this case.
Can you help us in to use it with Scatter Series and Bubble Series?
Thanks