How to add chart.js legends in ember.js?
How to add chart.js legends in ember.js?
1 answer
by
kadin ,
a month ago
@edmond_brakus
To add legends to charts created using Chart.js in an Ember.js app, you can follow these steps:
- Install the ember-cli-chart package by running the following command in your Ember.js project directory:
1
|
ember install ember-cli-chart |
- Create a new component for your chart and customize it as needed. Here's an example of how you can create a simple bar chart with a legend:
1
|
ember generate component bar-chart |
In the newly created bar-chart component file, you can customize your chart using Chart.js and include the legend options as shown below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { defaults } from 'chart.js';
export default class BarChartComponent extends Component {
@tracked chartData = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'My First Dataset',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'red',
'blue',
'yellow',
'green',
'purple',
'orange'
],
borderColor: 'black',
borderWidth: 1
}]
};
@action
async renderChart(element) {
const ctx = element.getContext('2d');
defaults.global.legend.display = true; // display the legend
new Chart(ctx, {
type: 'bar',
data: this.chartData
});
}
}
|
- Add the newly created bar-chart component to your template file where you want to display the chart:
1
|
<canvas {{did-insert this.renderChart}} width="400" height="400"></canvas>
|
This will render a bar chart with legends in your Ember.js app. You can further customize the appearance and behavior of the chart by modifying the Chart.js options in the component file.
Please ensure that you have included the necessary Chart.js library in your project to make this work.