CODEWITHSUNDEEP
angularjsnvd3.js
Birek
Birek

Reputation: 93

I want a simple red line in my nvd3 charts

I made a nvd3 chart. I have a problem. I want to draw a simple red line along y axis. Example: x:i y:180. But I do not want to treat as a data, than has value. So as a simple line.

Sourcecode:

  vm.fhrOptions = {
            chart: {
                type: 'lineChart',
                useInteractiveGuideline: true,
                height: 300,
                forceY:([60,200]),

                lineY:([120,180]),
                fitScreen: true,
                margin : {

                    left:70,
                    bottom:0

                },
                transitionDuration: 1000,
                xAxis: xAxisOptions,
                yAxis: {
                    axisLabelDistance:50,


                            lines: {value: 120},


                    color : { pattern:['#1f77b4', '#aec7e8']},
                    axisLabel: 'FHR [pulzus/perc]',
                    tickFormat: function(d){
                        return d===null?'NaN':d3.format('d')(d);
                    },
                    rotateYLabel: -45,
                    showMaxMin: false,
                    domain:([80, 160]),
                    showLegend:true
                }

            }
        };

Upvotes: 1

Views: 76

Answers (1)

SK2017
SK2017

Reputation: 773

Use the following to draw a single line across your chart, change parameters as necessary and change '#chart svg' to your selector name.

                        d3.select('#chart svg')
                        .append('line')
                        .attr({
                        x1: 500 + chart.xAxis.scale()(0),
                        y1: 35 + chart.yAxis.scale()(10),
                        x2: 57 + chart.xAxis.scale()(3),
                        y2: 35 + chart.yAxis.scale()(10)
                        })
                        .style("stroke", "#FF0000")
                        .style("fill", "#ff0000");

Upvotes: 1

Related Questions