---
title: Line and dot series
charts:
  - Line Chart
---

<h5>{{title}}</h5>
<p>
  The line series chart is used to compare a series of data elements grouped
  along the xAxis.
</p>
<p>
  This example also demonstrates how you can mix in a dot series feature to allow
  specific points along the line series to be clearly demarcated.
</p>
<hr/>
<script type="text/javascript" charset="utf-8" id='source_code'>
'use strict';

$(document).ready(function(){
  var data = [
    { year: '2010', unitsSold:-100, salesman : 'Bob' },
    { year: '2011', unitsSold:200, salesman : 'Bob' },
    { year: '2012', unitsSold:300, salesman : 'Bob' },
    { year: '2013', unitsSold:400, salesman : 'Bob' },
    { year: '2014', unitsSold:500, salesman : 'Bob' },
    { year: '2010', unitsSold:100, salesman : 'Gina' },
    { year: '2011', unitsSold:100, salesman : 'Gina' },
    { year: '2012', unitsSold:-100, salesman : 'Gina' },
    { year: '2013', unitsSold:500, salesman : 'Gina' },
    { year: '2014', unitsSold:600, salesman : 'Gina' },
    { year: '2010', unitsSold:400, salesman : 'Average' },
    { year: '2011', unitsSold:0, salesman : 'Average' },
    { year: '2012', unitsSold:400, salesman : 'Average' },
    { year: '2013', unitsSold:400, salesman : 'Average' },
    { year: '2014', unitsSold:400, salesman : 'Average' }
  ];
  var parsedData = d4.parsers.nestedGroup()
  .x(function() {
    return 'year';
  })
  .nestKey(function() {
    return 'salesman';
  })
  .y(function() {
    return 'unitsSold';
  })
  .value(function() {
    return 'unitsSold';
  })(data);

  var chart = d4.charts.line()
    .width($('#example').width())
    .x(function(x){
      x.key('year');
    })
    .y(function(y){
      y.key('unitsSold');
    })
    .using('lineSeries', function(line) {
      line.interpolate('linear');
    })
    .mixin({
      'dotSeries': d4.features.dotSeries
    },2)
    .using('dotSeries', function(dot) {
      dot.r(function() {
        return 5;
      });
    });

  d3.select('#example')
  .datum(parsedData.data)
  .call(chart);
});

</script>
<div id="line_and_dot">
  <div id="example"></div>
</div>
<h6>CSS Code</h6>
<pre><code class="language-css">
  #line_and_dot .d4 .series0 .dot {
      fill: darkred;
      fill-opacity: 0.6;
      stroke: darkred;
      stroke-width: 1px;
  }
  #line_and_dot .d4 .series0 path {
      stroke: darkred;
  }

  #line_and_dot .d4 .series1 .dot {
      fill: darkslategrey;
      fill-opacity: 0.6;
      stroke: darkslategrey;
      stroke-width: 2px;
  }
  #line_and_dot .d4 .series1 path {
      stroke: darkslategrey;
  }

  #line_and_dot .d4 .series2 .dot {
      fill: steelblue;
      fill-opacity: 0.6;
      stroke: steelblue;
      stroke-width: 2px;
  }
  #line_and_dot .d4 .series2 path {
      stroke: steelblue;
  }
</code></pre>
<h6>JavaScript Code</h6>
<pre><code id="code" class="language-javascript"></code></pre>