Chart.js with TypeScript

Question

var myCharts = <HTMLCanvasElement>document.getElementById("myChart");
        var ctx = myCharts.getContext('2d');

        var myChart = new Chart(ctx) => ({
            type: 'bar',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

// Please someone help me with this function. I am currently learning and not understanding whats wrong with this. The error says I am missing a semi colon at =>

score 1 · Answer 1 · answered Jun 28 '18 at 17:07

1

Your problem is on this line:

var myChart = new Chart(ctx) => ({

This isn't valid JavaScript. My best guess is you meant something like this:

var myChart = new Chart(ctx, {

answered Jun 28 '18 at 17:07

Michael Powers

1,970
1
7
12

I started by doing so but then I get a Typescript Error which says expected 1 arguments, but got 2. Please help I am using angular 1.7 with typescript – Madara Uchiha Jun 28 '18 at 17:11
How are you declaring ChartJS in your TypeScript? It sounds like your definition for Chart is missing the options argument. – Michael Powers Jun 28 '18 at 17:19
I dont know how to declare it. I got this code from chart.js . It worked fine on an html page inside a script tag but I want to use it in typescript. Please can you give me an example. – Madara Uchiha Jun 28 '18 at 17:23
With TypeScript I believe in order to use pure JavaScript libraries you either have to set --allowJs=true when you're compiling (or in your options file) or you have to declare the interface. See [this question](https://stackoverflow.com/questions/38318542/how-to-use-javascript-in-typescript) for more detail. – Michael Powers Jun 28 '18 at 17:27

Chart.js with TypeScript

1 Answers1