C3js - Show circle only at the last point of the chart

Asked

Viewed 46 times

1

My chart currently has all the dots hidden ( the dots I refer to are the "dots" circles), but I need it to show the dots only at the last dot.

Look at this picture to see exactly what I need. inserir a descrição da imagem aqui

As you can see, all the "Polka dots" are hidden, except the last.

I took a look at the C3js material, but I couldn’t find anything that could help me with this.

Does anyone know how I can do it?

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>
<div class="chart-container grafico-scroll-personalizada">         
<div class="chart" id="perfor-atual">
  </div>
</div>

Fiddle

javascript d3.js

1 answer

1


You should add this CSS.

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

And then you must Remove this item from the JS.

point: {
        show: false
       },

Your code will look like this. Fiddle

Browser other questions tagged javascript d3.js

You are not signed in. Login or sign up in order to post.