MichaelVoelkel / ChartJs2QML

QML adaptor for Chart.js 2.x that supports startup animations and tooltips
MIT License
98 stars 20 forks source link

Cannot assign to non-existent property "Color" #5

Closed photoenchen closed 3 years ago

photoenchen commented 3 years ago

If I try to include the Charting Library I get the following error: "Chart.js:2123: Error: Cannot assign to non-existent property "Color"

The repository is stored in an subfolder of my project and I include it via: import "./ChartJs2QML/"

The Chart object will be used in a Page environment of QtQuick.Controls, as shown below.

`import QtQuick 2.12 import QtQuick.Window 2.0 import QtQuick.Controls 2.5 import "./ChartJs2QML/"

Page { property string pageName

id: detailPage
//anchors.fill: parent
title: pageName+" Plot"

Item {
        id: grid
        anchors.fill: parent

        Chart {
            chartType: 'scatter'
            chartData: {
                return {
                    datasets: [{
                        label: 'My First dataset',
                        xAxisID: 'x-axis-1',
                        yAxisID: 'y-axis-1',
                        borderColor: '#ff5555',
                        backgroundColor: 'rgba(255,192,192,0.3)',
                        data: [{
                            x: 0,
                            y: 0,
                        }, {
                            x: 1,
                            y: 1,
                        }, {
                            x: 5,
                            y: 5,
                        }]
                    }, {
                        label: 'My Second dataset',
                        xAxisID: 'x-axis-1',
                        yAxisID: 'y-axis-2',
                        borderColor: '#5555ff',
                        backgroundColor: 'rgba(192,192,255,0.3)',
                        data: [{
                            x: 0,
                            y: 1,
                        }, {
                            x: 1,
                            y: 2,
                        }, {
                            x: 5,
                            y: 6,
                        }]
                    }]
                }}
            chartOptions: {return {
                    maintainAspectRatio: false,
                    responsive: true,
                    hoverMode: 'nearest',
                    intersect: true,
                    title: {
                        display: true,
                        text: 'Chart.js Scatter Chart - Multi Axis'
                    },
                    scales: {
                        xAxes: [{
                            position: 'bottom',
                            gridLines: {
                                zeroLineColor: 'rgba(0,0,0,1)'
                            }
                        }],
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }, {
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'right',
                            reverse: true,
                            id: 'y-axis-2',

                            // grid line settings
                            gridLines: {
                                drawOnChartArea: false, // only want the grid lines for one axis to show up
                            },
                        }],
                    }
                }
            }

            anchors {
                left: parent.left
                top: parent.top
                right: parent.horizontalCenter
                bottom: parent.verticalCenter
            }
        }
}

}`

photoenchen commented 3 years ago

Ok, I was able to solve the issue by replacing window.Color by this.Color and window.Chart by this.Chart in Chart.js