C3js - Show circle only in the last point of the graph

Navigation
1

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.

Look at this image to see exactly what I need.

Asyoucansee,all"Polka Dots" dots are hidden, except the last.

I took a look at the C3js stuff, but found nothing that could help me with this.

Does anyone know how I can do this?

My current code. 

var area_chart = c3.generate({
            bindto: '#perfor-atual',
            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],
                    producao,
                ],
                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
                }
            }
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script><divclass="chart-container grafico-scroll-personalizada">         
<div class="chart" id="perfor-atual">
  </div>
</div>

Fiddle

    
asked by anonymous 15.10.2018 / 21:39

1 answer

1

You should add this CSS. 

#chart .c3-circle:not(:last-child){ display:none; }

Then you should remove this item from JS. 

point: {
        show: false
       },

Your code will look like this. Fiddle

    
24.10.2018 / 21:27
Servlet attributes for more than one JSP? How to use "request unique" in the following situation