JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<link rel="stylesheet" href="c3.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

JavaScript

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
                }
            }
        });