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, 8 months ago by restyl1997.