Line

Init Vue Instance


    <body>...</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
    <script src="js/vue-charts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script>
        Vue.use(VueCharts);
        const app = new Vue({
            el: '#app'
        });
    </script>
    

Basic Usage

Defaul line

<chartjs-line></chartjs-line>
<chartjs-line></chartjs-line>

Set Scales Display

<chartjs-line :scalesdisplay="false"></chartjs-line>
<chartjs-line :scalesdisplay="myboolean"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : false,
        },
    });
</script>

Set Hight and Width

<chartjs-line :width="300" :height="500"></chartjs-line>
<chartjs-line :width="mywidth" :height="myheight"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mywidth : 300,
            myheight : 500,
        },
    });
</script>

Set Begin At Zero

<chartjs-line :beginzero="true"></chartjs-line>
<chartjs-line :beginzero="myboolean"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
             myboolean : true
        },
    });
</script>

Set Labels and Data

<chartjs-line :datalabel="'TestDataLabel'" :labels="['happy','myhappy','hello']" :data="[100,40,60]"></chartjs-line>
<chartjs-line :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabel : 'TestDataLabel',
            mylabels : ['happy', 'myhappy', 'hello'],
            mydata : [100, 40, 60]
        },
    });
</script>

Set Fill Boolean

<chartjs-line :fill="true"></chartjs-line>
<chartjs-line :fill="myboolean"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : true,
        },
    });
</script>

Set Line Tension

<chartjs-line :linetension="0"></chartjs-line>
<chartjs-line :linetension="mytension"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mytension : 0,
        },
    });
</script>

Set Color

<chartjs-line :fill="true" :backgroundcolor="'rgba(75,192,192,0.1)'" :bordercolor="'#00c853'"></chartjs-line>
<chartjs-line :fill="myboolean" :backgroundcolor="mybackgroundcolor" :bordercolor="mybordercolor"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myboolean : true,
            mybackgroundcolor : 'rgba(75,192,192,0.1)',
            mybordercolor : '#00c853'
        },
    });
</script>

Set Hover Point

<chartjs-line
    :pointborderwidth="4"
    :pointbordercolor="'#f35009'"
    :pointhoverborderwidth="3"
    :pointhoverbackgroundcolor="'#636b6f'"
    :pointhoverbordercolor="'#ffd663'">
</chartjs-line>
<chartjs-line
    :pointborderwidth="mywidth"
    :pointbordercolor="mypointbordercolor"
    :pointhoverborderwidth="hoverwidth"
    :pointhoverbackgroundcolor="hoverbackgroundcolor"
    :pointhoverbordercolor="hoverbordercolor">
</chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mywidth: 4,
            mypointbordercolor : '#f35009',
            hoverwidth : 3,
            hoverbackgroundcolor : '#636b6f',
            hoverbordercolor : '#ffd663',
        },
    });
</script>

Multiple Lines

Line on Target Canvas

<canvas id="mycanvas" count="2"></canvas>
<chartjs-line :datalabel="'first'" :linetension="0" target="mycanvas"></chartjs-line>
<chartjs-line :datalabel="'second'" :data="[50, 40, 90, 60]" target="mycanvas"></chartjs-line>
<canvas id="mycanvas" count="2"></canvas>
<chartjs-line :datalabel="first_label" :linetension="first_tension" target="mycanvas"></chartjs-line>
<chartjs-line :datalabel="second_label" :data="second_data" target="mycanvas"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            first_label : 'first',
            first_tension : 0,
            second_label : 'second',
            second_data : [50, 40, 90, 60],
        },
    });
</script>

Different Color

<canvas id="mycanvas2" count="2"></canvas>
<chartjs-line :datalabel="'first'" :backgroundcolor="'rgba(75,192,192,0.1)'" :bordercolor="'#00c853'" target="mycanvas2"></chartjs-line>
<chartjs-line :datalabel="'second'" :data="[50, 40, 90, 60]" target="mycanvas2"></chartjs-line>
<canvas id="mycanvas2" count="2"></canvas>
<chartjs-line :datalabel="first_label" :backgroundcolor="first_backgroundcolor" :bordercolor="first_bordercolor" target="mycanvas2"></chartjs-line>
<chartjs-line :datalabel="second_label" :data="second_data" target="mycanvas2"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            first_label : 'first',
            first_backgroundcolor : 'rgba(75,192,192,0.1)',
            first_bordercolor : '#00c853',
            second_label : 'second',
            second_data : [50, 40, 90, 60],
        },
    });
</script>

Override

Override Datasets

<chartjs-line :labels="mylabels" :datasets="mydatasets"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            mylabels: ["January", "February", "March", "April", "May", "June", "July"],
            mydatasets:[{
                label: "My first dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            },
            {
                label: "My second dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [0, 20, 40, 41, 66, 25, 80],
                spanGaps: false,
            },]
        },
    });
</script>

Override Options

<chartjs-line :option="myoption"></chartjs-line>
<script>
    Vue.use(VueCharts);
    const app = new Vue({
        el: '#app',
        data:{
            myoption:{
                responsive:true,
                maintainAspectRatio:true,
                title: {
                    display: true,
                    position: 'bottom',
                    text: 'Custom Chart Title'
                },
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero:true,
                        }
                    }]
                }
            }
        }
    });
</script>