Closed yichunsung closed 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>
It's my mistake that I forget remove scoped from style tag
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?