Custom Graph with arrow placed at pre-selected X value

[restyl1997]

I have the following chart below that I created in Excel:

I have made a similar graph in CanvasJS:

Here is the code:

		window.onload = function () {

		var chart = new CanvasJS.Chart("chartContainer", {
			animationEnabled: true,
			axisX: {
				title: "Ambient Temperature [°F]",
				minimum: 40,
				maximum: 100
			},
			axisY: {
				title: "Gross Output [HP]",
				minimum: 400000,
				maximum: 600000
			},
			legend: {
				verticalAlign: "top",
				horizontalAlign: "right",
				dockInsidePlotArea: true
			},
			toolTip: {
				shared: true
			},
			data: [{
				name: "TIAC",
				showInLegend: true,
				toolTipContent: "<strong style='color:#208340;'>{label}:</strong><br /><strong style='color:#0085ac;'>{name}</strong>: {y} HP", 
				legendMarkerType: "square",
				type: "area",
				color: "rgba(0,133,172,0.8)",
				markerSize: 0,
				dataPoints: [
					{ x: 40, y: 548811 },
					{ x: 45, y: 548811 },
					{ x: 50, y: 548811 },
					{ x: 55, y: 548811 },
					{ x: 60, y: 548811 },
					{ x: 65, y: 548811 },
					{ x: 70, y: 548811 },
					{ x: 75, y: 548811 },
					{ x: 80, y: 548811 },
					{ x: 85, y: 548811 },
					{ x: 90, y: 548811 },
					{ x: 95, y: 548811 },
					{ x: 100, y: 548811 }
				]
			},
			{
				name: "No TIAC",
				showInLegend: true,
				toolTipContent: "<strong style='color:#a62337;'>{name}</strong>: {y} HP",
				legendMarkerType: "square",
				type: "area",
				color: "rgba(166,35,55,1)",
				markerSize: 0,
				dataPoints: [
					{ x: 40, y: 560002 },
					{ x: 45, y: 548237 },
					{ x: 50, y: 538444 },
					{ x: 55, y: 528906 },
					{ x: 60, y: 519720 },
					{ x: 65, y: 510639 },
					{ x: 70, y: 501347 },
					{ x: 75, y: 489034 },
					{ x: 80, y: 476781 },
					{ x: 85, y: 462881 },
					{ x: 90, y: 448933 },
					{ x: 95, y: 434531 },
					{ x: 100, y: 419463 }
				]
			}]
		});
		chart.render();

		}
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

My questions are:
I want to send an X value to this chart and have it selected, so the tool tip shows up where that X point is. How could I do that?
Additionally, I want to add a vertical arrow from the top of the red area to the top of the blue line as shown in the first image.

• This topic was modified 4 years, 1 month ago by restyl1997.

[Indranil]

@restyl1997,

I want to send an X value to this chart and have it selected, so the tool tip shows up where that X point is. How could I do that?

Showing toolTip programmatically is not possible as of now. However, this feature is there in our wish-list and would be available in future versions.

Additionally, I want to add a vertical arrow from the top of the red area to the top of the blue line as shown in the first image.

Adding arrow/custom drawing on chart is not available as an inbuild feature, as of now.

___________
Indranil Deo
Team CanvasJS