I am just starting to explore the world of D3.js, I've completed a few tutorials and dived straight into my initial project. My intention was to combine the concepts from the following examples with some modifications to suit my specific requirements. However, I have encountered two main issues that I could use some help with:
and
- The mouseover feature is not displaying correctly; it appears to the left of the chart instead of where expected. It seems like a minor issue but I haven't been able to identify the cause.
- I'm struggling to find a way to show the "Safe Value" text outside the chart next to the line. EDIT 2 - I have managed to resolve this issue.
Any assistance or guidance on resolving these problems would be highly appreciated.
Here is the CSS code snippet:
body {
font: 10px sans-serif;
}
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: steelBlue;
stroke-width: 1.5px;
/*clip-path: url(#clip);*/
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
} ... (trimmed for brevity)
Javascript Code:
var margin = {top: 10, right: 15, bottom: 100, left: 60},
... (trimmed for brevity)
// The rest of the Javascript code can be found in the original post
Link to view the full code:
Plunker Code (Please refer to the link for the updated version.) Thank you.
Images for reference: