Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1065
Display values on top of the columns
posted

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

Parents
  • 30692
    Suggested Answer
    Offline posted

    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

Reply Children