Skip to content

how to use Multi Axis Line Chart #19

Open
@fish-and-skiing-life

Description

@fish-and-skiing-life

I would like to have multiple y-labels for the line graph, as shown in the linked page.
so, I followed the official chartjs documentation and specified the options. The code looks like the following.

<template>
    <CChartLine
        :options='lineOptions'
        :datasets="lineData"
        :labels='lineLabels'
     />
</template>
<script>
export default {
    data() {
        return {
            lineData: [
                {
                    label: 'data1',
                    fill: false,
                    borderColor: 'rgb(65,105,225,0.9)',
                    data: [1,2,3,4],
                    radius: 3,
                    yAxisID: 'y'
                },
                {
                    label: 'data2',
                    fill: false,
                    borderColor: 'rgb(60,179,113,0.9)',
                    data: [1000000,2000000,3000000,4000000],
                    radius: 3,
                    yAxisID: 'y1'
                }
            ],
            lineOptions: {
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                    },
                }
            }
        }
    }
}
</script>

However, the following error occurred on the console.
Screen Shot 2021-08-07 at 16 30 25

How can I specify the options to resolve the error?

PS
I have changed the format of the options as listed in the issue #18 , but the same error occurs and it did not work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions