c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.35k stars 1.39k forks source link

How can I change my c3 chart axis color in vue app #2615

Closed yichunsung closed 5 years ago

yichunsung commented 5 years ago

I want use c3.js in my vue app, it's successful to build a chart but I can't change my c3 chart axis color.

It's not just axis color, all style of c3 charts I can't change and fixed, it's upset for me.

Do you have any idea for it?

<template>
    <div id="home">

        <div class="block1">
            <div id='lineChart'></div>
        </div>
    </div>

</template>
<script>

    import * as d3 from "d3";
    import c3 from 'c3';

    export default {
        mounted(){
            this.loadBlock1();
        },
        methods:{
            loadBlock1 () {
                let chart = c3.generate({
                    bindto:'#lineChart',
                    data: {
                        columns: [
                            ['data1', 30, 200, 100, 400, 150, 250],
                            ['data2', 50, 20, 10, 40, 15, 25]
                        ],

                    }
                });
            }
        }
    }
</script>
<style scoped>
    @import "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.0/c3.min.css";

    #lineChar .c3-line-data2 {
        stroke-width: 5px;
    }
    #lineChart .c3-axis-x line,
    #lineChart .c3-axis-x path {
        stroke:blue;
    }
</style>
yichunsung commented 5 years ago

It's my mistake that I forget remove scoped from style tag