Home Forums Chart Support Custom Graph with arrow placed at pre-selected X value

Custom Graph with arrow placed at pre-selected X value

Viewing 2 posts - 1 through 2 (of 2 total)
  • #28338

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

    I have made a similar graph in CanvasJS:
    Excel

    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, 10 months ago by restyl1997.
    #28356

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.