Add annotations to D3 line graph using D3plus

Solution for Add annotations to D3 line graph using D3plus
is Given Below:

I’m working adding a line plot graph that uses dates on the x axis and dollar values on the Y axis in a Vue SPA, and I need to add some annotations; in particular three vertical lines with labels at different dates (representing dates in the life of a contract), and a horizontal line at a dollar value (represents a contract’s fully disbursed value). I was initially using d3 with d3-annotation, but due to conflicts with the latest D3, I have been unable to use that library.

I started playing with d3plus, but it looks like I have to use it to build my chart from scratch, instead of just adding annotations on top of an existing chart made with d3; the annotations are just a method on the Plot() class.

Here’s what I have for my d3 version of the chart. It’s broken up into a couple of Vue components:

                <svg id="lineChart" :style="{opacity: loading  ? .5 : 1}" :viewBox="viewBox" preserveAspectRatio="xMinYMin meet">
                        :x="(width / 2) - 25"
                        :y="(height / 2) - 25"


                    <g id="funding-timeline-y-axis"></g>
                    <g id="funding-timeline-x-axis"></g>

    export default {
        name: "LineChartData",

        props: {
            chartData: String,
            stroke: String,
            strokeWidth: Number


    <path style="fill: none" :stroke-width="strokeWidth" :stroke="stroke" :d="chartData"></path>

Since d3plus is built on top of d3, is there a way to add an annotation to this d3 chart without having to build everything in d3plus from scratch?