Ng2-charts: Chart Options not editable (also legend option not working)
Updated this issue. There seems several options not being used correctly (or I'm wrong).
First of all; legend is always showing, also when adding "false"
<base-chart class="chart"
[data]="[10, 20]"
[labels]="['foo', 'bar']'"
[legend]="false"
[chartType]="doughnut">
</base-chart>
Second of all, I want to have a linechart with straight lines. Adding LineTension to options doesn't work though. Were do I get wrong?
<base-chart class="chart"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColours"
[legend]="lineChartLegend"
[chartType]="lineChartType">
</base-chart>
// Chart values
public lineChartData:Array<any> = [
{data: [15, 29, 24, 21, 26, 15, 10], label: 'Opening/Time'}
];
public lineChartLabels:Array<any> = ['23 mei', '24 mei', '25 mei', '26 mei', '27 mei', '28 mei', '29 mei'];
public lineChartOptions:any = {
animation: false,
responsive: true,
lineTension: 0
};
public lineChartColours:Array<any> = [
{ // grey
backgroundColor: '#B3C1D9',
borderColor: '#264E94',
pointBackgroundColor: '#003082',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
public lineChartLegend:boolean = false;
public lineChartType:string = 'line';
Probably this is described somewhere, but I could not find it for this plugin. Please help.
alfakappa
All 19 comments
because of this hack, bigger part of options doesn't work
but problem with legend:
you should not bind like this [data]="[10, 20]" [labels]="['foo', 'bar']'" [legend]="false"
try to bind to values (not properties)
data="[10, 20]" labels="['foo', 'bar']" legend="false"
valorkin
on 25 May 2016
Which "hack" I didn't hack anything, just used your examples :)
binding to values is throwing an error. (not allowed within angular2 templates?) so that is not an option. Also, this is exactly the way you are doing it in the demo, so, that should be fine, shouldn't it?
alfakappa
on 25 May 2016
I mean this hack
hm... I will have to reevaluate this
valorkin
on 25 May 2016
Ok. waiting for that. let me know if you need additional info.
alfakappa
on 26 May 2016
Hi,
@alfakappa @valorkin
Do not import legend as a bind able property, you do not need to use this at all: [legend]="chartLegend"
what you do is take it over as an option like so:
legend:any = { display: false, fullWidth: false};
bar_options:any = {
responsive: true,
scaleShowVerticalLines: false,
animationEasing: "easeOutBounce",
pointLabelFontSize: 12,
maintainAspectRatio: false,
legend:this.legend
};
MrBananaGuard
on 26 May 2016
Thanks for your reply @MrBananaGuard
This is my code right now, but it is still not using any of these options. Do I miss something?
private legend:any = { display: false, fullWidth: false};
private lineChartOptions:any = {
responsive: true,
scaleShowVerticalLines: false,
animationEasing: "easeOutBounce",
pointLabelFontSize: 12,
maintainAspectRatio: false,
legend:this.legend,
lineTension: 0
};
private lineChartColours:Array<any> = [
{
backgroundColor: '#B3C1D9',
borderColor: '#264E94',
pointBackgroundColor: '#003082',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}
];
<base-chart class="chart"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColours"
[chartType]="lineChartType">
</base-chart>
@alfakappa
Just this works fine for me:
line_options:any = {
responsive: true,
scaleShowHorizontalLines: false,
scaleShowVerticalLines: false,
animationEasing: "easeInOutElastic",
maintainAspectRatio: false,
legend: {
display: false
}
};
MrBananaGuard
on 27 May 2016
hm jep, does work indeed. However, any clue were I should add linetension?
alfakappa
on 28 May 2016
@valorkin when you say "bigger part of options won't work" in https://github.com/valor-software/ng2-charts/issues/227#issuecomment-221524909, does that mean I can't set the bar percentage? I'm trying to make there be no space between bars in a bar chart so I'm trying to do this:
chartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
maintainAspectRatio: false,
multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>',
animation: false,
scales: {
xAxes: [{
categoryPercentage: 1.0,
barPercentage: 1.0
}]
}
};
isc-rsingh
on 3 Jun 2016
@valorkin could you please inform on this issue?
I know you were busy solving another big issue/update, but it is actually a bit frustrating to not get the full out of chartJS currently with the ng2-charts plugin. I really don't know how this can be changed (although I did try to understand your code), but to me it seems that you made a separation between several parts of the script you need when creating a chart with the "normal" JS. However, I don't think you should separate it, but just ask for the input as it is requested from the chartjs documentation. Splitting it, makes it less logical to use according their documentation. (ie, you split options, colours en legend (thought that one is not working anyway) where chartJS request this in a single object at the moment. Why not leave it that way?)
alfakappa
on 13 Jun 2016
@alfakappa so did you able to solve this issue. I am thinking of using raw chart.js if this problem persists.
hhsadiq
on 14 Jul 2016
@hhsadiq nope. There is still the issue that you can not use all options (as far as I'm concerned)
any update on this @valorkin ?
alfakappa
on 14 Jul 2016
@alfakappa then its better to use chart.js directly instead of using ng2-charts
hhsadiq
on 14 Jul 2016
Well, that is not really a solution for the plugin imho. So, I'll leave this open until there is time to look into this problem. Is dat ok @valorkin ?
alfakappa
on 2 Aug 2016
It seems that the options doesn't take effects:
I have:
```
public incomeOptions:any={
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'index',
intersect: false
}
};
[datasets]="incomeDatasets"
[labels]="incomeLabels"
[colors]="incomeChartColors"
[options]="incomeOptions"
[chartType]="incomeChartType"
```
Not work too.
Changdao
on 8 Dec 2016
After upgrade the Chart.js to 2.4.0, ng2-charts to 1.4.1, my issue was solved.
Changdao
on 8 Dec 2016
Does indeed solve the problems. You can use the options now.
alfakappa
on 9 Dec 2016
trying to set up legend position to the left.
it returns and error
Chart.bundle.min.js:14 Uncaught TypeError: Cannot read property '0' of undefined
at i.draw (Chart.bundle.min.js:14)
at t.Controller.
at Object.a.each (Chart.bundle.min.js:14)
at t.Controller.draw (Chart.bundle.min.js:13)
at i.a.render (Chart.bundle.min.js:13)
at Object.startDigest (Chart.bundle.min.js:13)
at Chart.bundle.min.js:13
set up (exactly as on demos + legend set up):
public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
public doughnutChartData:number[] = [350, 450, 100];
public doughnutChartType:string = 'doughnut';
private doughnutChartOptions:any = {
legend : { position: 'left' },
};
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
legend options to the left and right does not work on any chart type - tryed them all.
piklasfam
on 24 Jan 2017
See I am using CANVAS ng2 charts doughnut type
But the thing is by default the shape of legends is I think square or rectangle means a block type figure, but the need is to make legends in circular shape....so how can I do this
lakshyamathur1
on 6 Jun 2018
Related issues
brandonreid
路
3Comments
Adwind
路
3Comments
SteeledSlagle13
路
3Comments
Maistho
路
3Comments
hggeorgiev
路
4Comments
Most helpful comment
@alfakappa
Just this works fine for me:
line_options:any = { responsive: true, scaleShowHorizontalLines: false, scaleShowVerticalLines: false, animationEasing: "easeInOutElastic", maintainAspectRatio: false, legend: { display: false } };