Chart options not used with chart js

Asked By: Anonymous

I have a Aurelia project that uses chart js. I can display a chart fine but it seems that the chart options are not used.

I have a typescript controller that does the following:

SimpleLineData: LinearChartData;
optionschart: ChartSettings;

 activate() {

    this.optionschart = this.chartoptions;
    this.xx();
    setInterval(this.yy.bind(this), 1000);
}

public xx() {

      this.SimpleLineData  = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset 1",
                fillColor: '#9b0391',
                strokeColor: '#9b0391',
                pointColor: '#9b0391',
                pointStrokeColor: '#9b0391',
                pointHighlightFill: '#9b0391',
                pointHighlightStroke: '#9b0391',
                borderColor: "#9b0391",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset 2",
                fillColor: 'rgba(151,187,205,0.2)',
                strokeColor: 'rgba(151,187,205,1)',
                pointColor: 'rgba(151,187,205,1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(151,187,205,1)',
                borderColor: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    }
}

 public yy() {
    this.SimpleLineData.datasets[0].data[0] = this.x;
    this.x++;
}

public chartoptions = {
    animation: false
};

And in my html i do:

 <chart type="line" style="width: 50%; height: 50%; display: block;" should-update="true" throttle="1000" naive-options="optionschart" data.bind="SimpleLineData"></chart>

When yy() is called then the data is updated, but the chart renders again with the animation. Even when i have set the animation: false option.

Does anyone have a sugestion?


Solution

Answered By: Anonymous

You have a typo in your html. naive-options should be changed to native-options. It still might not work because according to the documentation, it should be native-options.bind

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno