Chart JS (the underlying chart library) has some quirks when it comes to resizing, like for example this plugin needs to cache the plugin size because if you refresh the chart in place it just shrinks itself into oblivion, so to get around that we cache the size on creation and explicitly override it each time it is refreshed, so this may be causing you problems.
I am not sure if they have fixed it in the chartjs project as I know they were looking to do a massive upgrade, after the weekend if I have time I will see if I can integrate the latest chartjs library and see if that fixes some of these issues.
Just to keep you in the loop I have integrated most of the new version in, but there are significant changes which will require people to change their data syntax to match the chart js 2.* schemas. There are still a few issues outstanding that I need to solve but hopefully should have a release soon which will simplify a lot of this stuff and remove some code from this lib.
That is great. I am planning on using your component in a project. I have only one chart right now, so any changes on my end should be easy. If there is something that I can do to give back, please let me know. A couple of things, it looks like using the
ok so I am a bit confused and opening for anyone else who knows chart js to have some input on this one, as the attribute works fine but the element refuses to work, I am not sure if it is because the template element is somehow not being created in time for chart js or if there needs to be some additional information on the element or something, but it worked fine before on the previous version.
I have made a branch containing the partially working version chart-js-2 so anyone who knows more about this can feel free to run the example and hopefully see the issue.
(just seen your response)
The new chartjs 2.* lib has better support for resizing and updating, just as mentioned above for some reason it just refuses to show the elements even when passing it the same data as the attribute (which is what I hardcoded in the branch just to show that the attribute works fine but the element does not).
There may be some further work to do on the observing of models as currently it just catches as much as is possible in a simple way, so basic things like swapping in and out the data model, or adding/removing elements should be tracked to some degree (see #9), if it is a scenario outside those bounds it may require some additional development.
ok so I think most of the main problems have been solved, so if possible could you try the current version in the branch and see if it helps with your problem as there will be no custom resizing logic and the chart refresh triggers a resize on the underlying chart.
Thanks. I will take a look tonight. So just for my benefit because I am a bit new on this. Right now I am just importing using jspm update. In my package.json file I have the line:
Is there a simple change that would allow me to get the new version into my solution (i.e. can I just do something like.... "grofit/aurelia-chart": "github:grofit/aurelia-chart@^0.1.2",
That should do, you don't need the grofit/aurelia-chart prefix of owner its normally more succinct to just leave it as package-name:url/git/etc.
Once you have deleted the current version and then replaced your line with that above line and done a jspm install it should automatically get you the version from that branch to try... I still find JSPM a bit like black magic so I am not entirely sure if you will hit any other issues along the way but that off top of my head should get you going.
This worked great. Thanks for the help on this. The chart now goes to 100% of the container and looks nice. I was also able to update the legend. I used this syntax on the canvas.
great, so I will mark this as fixed and will promote the new version up to master once I update the readme a bit. Let me know if you run into any other problems/issues.
Hi,
Thanks for publishing this component. I am incorporating it into a project, but I am coming across an issue. I am using the following syntax:
I am setting the data in the .ts file:
this.chartData = { labels: quoteDates, datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0)", maintainAspectRatio: false, responsive: true, strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: closingPrices } ] };
This would well, but I cannot seem to get the chart to resize to fill whole
When I attempt to resize by applying a style to the canvas it gets bigger but it only displays the portion in the original size.
I have tried to use the
The basic bug is that neither of the following seem to do anything:
Thanks!
Chart JS (the underlying chart library) has some quirks when it comes to resizing, like for example this plugin needs to cache the plugin size because if you refresh the chart in place it just shrinks itself into oblivion, so to get around that we cache the size on creation and explicitly override it each time it is refreshed, so this may be causing you problems.
I am not sure if they have fixed it in the chartjs project as I know they were looking to do a massive upgrade, after the weekend if I have time I will see if I can integrate the latest chartjs library and see if that fixes some of these issues.
Thanks for the prompt response. Please let me know if you do have a chance to integrate the latest version of the library.
Thanks,
Charlie
Just to keep you in the loop I have integrated most of the new version in, but there are significant changes which will require people to change their data syntax to match the chart js 2.* schemas. There are still a few issues outstanding that I need to solve but hopefully should have a release soon which will simplify a lot of this stuff and remove some code from this lib.
That is great. I am planning on using your component in a project. I have only one chart right now, so any changes on my end should be easy. If there is something that I can do to give back, please let me know. A couple of things, it looks like using the
Thanks,
ok so I am a bit confused and opening for anyone else who knows chart js to have some input on this one, as the attribute works fine but the element refuses to work, I am not sure if it is because the template element is somehow not being created in time for chart js or if there needs to be some additional information on the element or something, but it worked fine before on the previous version.
I have made a branch containing the partially working version
chart-js-2so anyone who knows more about this can feel free to run the example and hopefully see the issue.(just seen your response)
The new chartjs 2.* lib has better support for resizing and updating, just as mentioned above for some reason it just refuses to show the elements even when passing it the same data as the attribute (which is what I hardcoded in the branch just to show that the attribute works fine but the element does not).
There may be some further work to do on the observing of models as currently it just catches as much as is possible in a simple way, so basic things like swapping in and out the data model, or adding/removing elements should be tracked to some degree (see #9), if it is a scenario outside those bounds it may require some additional development.
Another update, apologise for the spam, it seems to be down to the way they calculate sizing now:
https://github.com/chartjs/Chart.js/issues/2151
You need to explicitly provide a size if one is not provided elsewhere or it blows up, am seeing if there is a workaround.
ok so I think most of the main problems have been solved, so if possible could you try the current version in the branch and see if it helps with your problem as there will be no custom resizing logic and the chart refresh triggers a resize on the underlying chart.
Thanks. I will take a look tonight. So just for my benefit because I am a bit new on this. Right now I am just importing using jspm update. In my package.json file I have the line:
"grofit/aurelia-chart": "github:grofit/aurelia-chart@^0.1.1",
Is there a simple change that would allow me to get the new version into my solution (i.e. can I just do something like.... "grofit/aurelia-chart": "github:grofit/aurelia-chart@^0.1.2",
Thanks for your help.
Charlie
You should be able to just pull it from the branch by removing the folder inside
jspm_packagesfor the old one, and then updating your include to:That should do, you don't need the
grofit/aurelia-chartprefix of owner its normally more succinct to just leave it aspackage-name:url/git/etc.Once you have deleted the current version and then replaced your line with that above line and done a
jspm installit should automatically get you the version from that branch to try... I still find JSPM a bit like black magic so I am not entirely sure if you will hit any other issues along the way but that off top of my head should get you going.Thanks. I will take a look tonight.
This worked great. Thanks for the help on this. The chart now goes to 100% of the container and looks nice. I was also able to update the legend. I used this syntax on the canvas.
<canvaschart="type: line; data.bind: chartData; should-update: true; throttle: 100; native-options.bind: chartOptions; ">`and for the data in the my typescript file I used:
chartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: '', pointBackgroundColor: "#008FD5", pointBorderColor: "#008FD5", borderColor: "#008FD5", data: [65, 59, 80, 81, 56, 55, 40] } ] }; chartOptions = { legend: { display: false } };great, so I will mark this as fixed and will promote the new version up to master once I update the readme a bit. Let me know if you run into any other problems/issues.