title: C3js - Show circle only at the last point of the graph
body: <p>My chart currently has all the hidden points (the points I'm referring to are "balls" circles), but I need them to show the ball only at the last point.</p>
  
  <p>Look at this image to see exactly what I need.</p>
  
  <p><a href="https://i.stack.imgur.com/jEed5.jpg" rel="nofollow noreferrer">Picture</a></p>
  
  <p>As you can see, all the dots "balls" are hidden, except the last one.</p>
  
  <p>I took a look at the C3js material, but found nothing that would help me with that.</p>
  
  <p>Does anyone know how I can do this?</p>
  
  <p>My current code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var area_chart = c3.generate({
              bindto: '#chart',
              size: { height: 350, width: 800 },
              point: {
                  show: false
              },
              color: {
                  pattern: ['#000', '#E53935']
              },
              data: {
                  columns: [
                      ['Meta', 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
                      ['Produção', 200, 280, 280, 280, 260, 260, 260, 260, 270, 270, 270, 270, 270, 230, 240, 280, 300],
                  ],
                  types: {
                      Produção: 'area-spline',
                  }
              },
              axis: {
                  x: {
                      type: 'category',
                      categories: ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30'],
                      tick: {
                          rotate: 60,
                          multiline: false
                      },
                  }
              },
              grid: {
                  x: {
                      show: true
                  },
                  y: {
                      show: true
                  }
              }
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/9428n6br/1/" rel="nofollow noreferrer">CODE</a></p>