Custom Graph with arrow placed at pre-selected X value

• February 8, 2020 at 1:49 pm #28338
  
  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, 9 months ago by restyl1997.
  February 10, 2020 at 8:13 pm #28356
  
  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