dotted line in NVD3 line chart

Question

I want to build a line chart which will have multiple lines. Now I want to convert my target line to a dotted line. Like this -

 $scope.options = {
        chart: {
            type: 'lineChart',
            height: 450,
            margin: {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            x: function (d) { return d.x; },
            y: function (d) { return d.y; },
            useInteractiveGuideline: true,
            xScale: d3.time.scale(),
            xAxis: {
                axisLabel: 'Months',
                ticks: d3.time.months,
                tickFormat: function (d) {                    

                    return d3.time.format('%Y %b')(new Date(d));

                }
            },
            yAxis: {
                axisLabel: 'WW',
                tickFormat: function (d) {


                    if (d == null) {
                        return 0;
                    }

                    return d3.format('.02f')(d);
                },
                axisLabelDistance: 30
            }
        }
    };

Here is my json data -

 $scope.data
    = [{
        "key": "ODC", "color": "#2196f3", "values":
            [{ "x": 1409509800000, "y": 8.0 }, { "x": 1412101800000, "y": 4.2 }, { "x": 1414780200000, "y": 2.1 }, { "x": 1417372200000, "y": 0.0 }, { "x": 1420050600000, "y": 2.0 }, { "x": 1422729000000, "y": 4.4 }, { "x": 1425148200000, "y": 1.4 }, { "x": 1427826600000, "y": 2.5 }, { "x": 1430418600000, "y": 0.0 }, { "x": 1433097000000, "y": 0.0 }, { "x": 1435689000000, "y": 0.0 }, { "x": 1438367400000, "y": 0.0 }]
    }, {
        "key": "ODCTarget", "color": "#008000", "values":
            [{ "x": 1409509800000, "y": 4.0 }, { "x": 1412101800000, "y": 4.0 }, { "x": 1414780200000, "y": 4.0 }, { "x": 1417372200000, "y": 4.0 }, { "x": 1420050600000, "y": 4.0 }, { "x": 1422729000000, "y": 4.0 }, { "x": 1425148200000, "y": 4.0 }, { "x": 1427826600000, "y": 4.0 }, { "x": 1430418600000, "y": 4.0 }, { "x": 1433097000000, "y": 4.0 }, { "x": 1435689000000, "y": 4.0 }, { "x": 1438367400000, "y": 4.0 }]
    }];

Please some one help me to do this.

score 10 · Answer 1 · edited Jan 30 '17 at 14:53

10

This example may be able to help you:

http://nvd3-community.github.io/nvd3/examples/lineChart.html

Add a css class to your series, f.e. dashed

{
   area: true,
   values: sin,
   key: "Sine Wave",
   color: "#ff7f0e",
   strokeWidth: 4,
   classed: 'dashed'
}

Then, add stroke-dasharray to dashed css class:

.dashed {
   stroke-dasharray: 5, 5;
}

edited Jan 30 '17 at 14:53

Atais

10,857
6
71
111

answered Sep 09 '15 at 19:38

James McShane

779
8
15

I tested this a little more. All that matters is that the ````stroke-dasharray```` style is on the ````nv-group```` dom element that defines the line. – James McShane Sep 09 '15 at 19:58
1

Plain `.dashed` will also affect the circle that appears upon hovering. I ended up using `.dashed .nv-line` to get the dashed line but to keep all the circles intact. – jsruok Jul 09 '18 at 11:05

dotted line in NVD3 line chart

1 Answers1