Thank you.

You can put text on the chart by using a custom marker template, or by floating DOM elements over the chart in the positions that you need. But this would not emulate the rest of the series you have in the picture. Where you just asking about text or the whole display? Could you be more specific as to your requirement?

Unfortunately the chart only supports gridlines, not tickmarks, at present. You can turn on minor gridlines by setting minorStroke and minorStrokeThickness, which may be a good substitute for you, but truncated tickmarks are not currently supported (although there may be a way to work around this).

The same, unfortunately, goes for dotted lines. Because we use the HTML5 canvas, under the covers, to do the rendering for the chart, and it doesn't natively support dotted or dashed lines, we would need to emulate the functionality in order to support it in the rendering.

Due to the complexity of achieving that with good performance, the chart doesn't support this feature in V1.

I encourage you to submit a feature request for these two features and we'll see what we can do about getting them implemented.

Hope this helps!

-Graham

Thank you very much! It works!

Now it is very close to what we want. Two more questions: 1. How to make a dotted line? 2: How to put tick marks on the aixes (see the chart)?

Here's an example of printing some text in a custom marker template:

var currData = null;

            var doGeneration = function () {
                var num = 10;
                var data = [];
                var curr = 10;
                for (var i = 0; i < num; i++) {
                    data[i] = { Value: Math.random() * 100.0, Value2: Math.random() * 100.0 };
                }
                currData = data;
            }

            doGeneration();

            var round2 = function (num) {
                return Math.round(num * 100.0) / 100.0;
            }

            $("#container").igDataChart({
                width: "500px",
                height: "500px",
                dataSource: currData,
                axes: [{
                    name: "xAxis",
                    type: "numericX"
                },
                {
                    name: "yAxis",
                    type: "numericY"
                }],
                series: [{
                    name: "series1",
                    title: "Test Series",
                    type: "scatter",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    xMemberPath: "Value",
                    yMemberPath: "Value2",
                    markerTemplate: {
                        measure: function (measureInfo) {
                            var cont = measureInfo.context;
                            var data = measureInfo.data;
                            var name = "null";
                            if (data.item() != null) {
                                name = round2(data.item().Value) + ", " + round2(data.item().Value2);
                            }
                            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 = "null";
                            if (data.item() != null) {
                                name = round2(data.item().Value) + ", " + round2(data.item().Value2);
                            }
                            var halfWidth = renderInfo.availableWidth / 2.0;
                            var halfHeight = renderInfo.availableHeight / 2.0;
                            var x = renderInfo.xPosition - halfWidth;
                            var y = renderInfo.yPosition - halfHeight;

                            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",
                overviewPlusDetailPaneVisibility: "visible"
            });

Hope this helps!
-Graham

Thank you for the information. We want to create a chart posted in my question. Basically, we want to create a serie with a custom marker (text) lable to show all the texts on the chart. Also, we want to put text on the axies as in above chart.