am trying to have different legends labels with their own colors representing each column in the bar series. As you see in the screen shot, i can't get other legends to appear.
Also each should have a different color. Here is my html.
<CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis allowPan="true"></LinearAxis>
<BarSeries tkCartesianSeries [items]="LivestockData"
categoryProperty="Year" valueProperty="Amount" seriesName="Bar" showLabels="true" legendTitle="Cattle"></BarSeries>
<!-- >> chart-legend-angular-definition -->
<RadLegendView tkCartesianLegend position="Bottom" title="Species"
height="150" enableSelection="true"></RadLegendView>
<!-- << chart-angular-styling-bars -->
<Palette tkCartesianPalette seriesName="Bar">
<PaletteEntry tkCartesianPaletteEntry fillColor="#A05BC5"></PaletteEntry>
</Palette>
</RadCartesianChart>
Here is the data am showing.
{ species: "Cattle", Amount: 4771, Year: 1980 },
{ species: "Sheep and goats", Amount: 3862, Year: 2000 },
{ species: "Pigs", Amount: 187, Year: 2002 },
{ species: "Poultry", Amount: 2941, Year: 1990 }
The species property values should be in the legends but i can only show cattle value and i also need different colors for each. Any help is appreciated.
I have the playground for you here. To have the mutiple colors for the Bars, you need to comment out the Palette section and add the paletteMode="Item" in your Bar Series.
<BarSeries tkCartesianSeries [items]="categoricalSource"
categoryProperty="Year" paletteMode="Item" valueProperty="Amount"
seriesName="Bar" legendTitle="Cattle" showLabels="true"></BarSeries>
Also Legend is working fine as they represents series type and you can modity the legendTitle per series. If you want multiple legends, you need to add mutiple Bar series(for each cattle in your case.)
Related
By default the ListPicker takes up a ton of screen space. Is there a way to make it behave like the metaphor for the HTML <select> when shown on mobile?
I've used this react native plugin before, and its exactly the metaphor I want, but for NativeScript.
Is this easy to do via NativeScript? I want to make use of the platform specific select metaphors, so showing/hiding a ListPicker or putting ListPicker in a modal is not what I'm looking for.
Also, I'm going to have a fairly long list, so an action Dialog wont work for me.
Update: I'm aware of nativescript-drop-down, however it does not use the platform specific "choose from list of choices" widget that webviews and react native plugin do.
By "platform specific choose from list of choices widget" I mean this (from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select):
iOS (note picker renders where keyboard would, with rolodex picker):
Android (note modal, with scroll list of options):
I think you are looking for the nativescript-drop-down which is similar to the react-native-picker-select you had pointed.
I was looking for the same solution and couldn't find one so I have created my own. I have attached a sample for you here.
You can have a textField/Label and onTab you can show the ListPicker, like Select behaves in HTML and it will use the native(platform specific) components only.
in your HTML
<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
<Label text="Country" width="70" height="50" backgroundColor="red"></Label>
<TextField [(ngModel)]="textFieldValue" hint="Choose countty..." editable="false" (tap)="showHideField('country')"></TextField>
</StackLayout>
<StackLayout orientation="vertical" width="100%" height="210" *ngIf="showCountryPicker" backgroundColor="lightgray">
<ListPicker [items]="listPickerCountries" (selectedIndexChange)="selectedCountyChanged($event)"></ListPicker>
</StackLayout>
and your .ts file
showCountryPicker = false;
listPickerCountries: Array < string > = ["Australia", "Belgium", "Bulgaria", "Canada", "Switzerland",
"China", "Czech Republic", "Germany", "Spain", "Ethiopia", "Croatia", "Hungary",
"Italy", "Jamaica", "Romania", "Russia", "United States"
];
showHideField() {
this.showCountryPicker = true;
}
selectedCountyChanged(args) {
const picker = < ListPicker > args.object;
this.showCountryPicker = false;
this.textFieldValue = this.listPickerCountries[picker.selectedIndex];
}
I've been trying to set a custom label in a line chart's tooltip , e.g., modified number of minutes in HH:mm format (74 min --> 1:14), for quite some time now, but unfortunately without any success. Displaying the value as 1.283(...3) is not an alternative.
Number to HH:mm as tooltip label
Does anybody know how to preserve the x and y axis values (a date and a number respectively), and modify the tooltip display value?
For example: https://swimlane.github.io/ngx-charts/#/ngx-charts/line-chart
Instead of having a tooltip that displays Color, Country name and Number,
--> Color, Country name and String (Number > 3000 ? 'high' : 'low';)
Current behavior
Works as intended.
Expected behavior
To display custom labels.
Reproduction of the problem
Link in the description above
What is the motivation / use case for changing the behavior?
Being able to customize tooltips' contents
Please tell us about your environment:
OS: Win 10 x64, IDE: Eclipse EE
ngx-charts version: 3.0.2
Angular version: 6.0.2
Browser: [all]
Language: [TypeScript 2.3.3]
You can define your own tooltip templates and render any HTML you like in them:
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="multi" ...>
<ng-template #tooltipTemplate let-model="model">
This is the single point tooltip template
<pre>{{model|json}}</pre>
</ng-template>
<ng-template #seriesTooltipTemplate let-model="model">
This is vertical line tooltip template
<pre>{{model|json}}</pre>
</ng-template>
</ngx-charts-line-chart>
Example: https://swimlane.github.io/ngx-charts/#/ngx-charts/tooltip-templates
Code is here: https://github.com/swimlane/ngx-charts/blob/8ebb3dbcbbea443fefdcafd1f5c9069df0e0c4ae/src/app/app.component.html#L992-L998
The above solution does not work for multi-dimensional charts ( > 3) like Stacked Horizontal/Vertical Bar.
Another simple way which works for all cases is to add the tooltipText as an attribute as part of the model like below:
export let multi = [
{
name: 'Germany',
series: [
{
name: '2010',
value: 7300000,
tooltipText: 't1'
},
{
name: '2011',
value: 8940000,
tooltipText: 't2'
}
]
}
];
Then use the following code in markup,
<ngx-charts-bar-horizontal-stacked
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[legendPosition]="legendPosition"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
<ng-template #tooltipTemplate let-model="model">
<div class="tooltip">
{{model.tooltipText}}
</div>
</ng-template>
</ngx-charts-bar-horizontal-stacked>
Thank you, once again. Didn't want to leave the issue unresolved.
The problem was the code snippet was inside a svg element.
Here's the final version:
<!-- This is single point tooltip template -->
<xhtml:ng-template #tooltipTemplate let-model="model">
<xhtml:div class="area-tooltip-container">
<xhtml:div *ngFor="let tooltipItem of model | json | durationHhmm" class="tooltip-item" style="text-align: center;">
<a style=" font-size: 1.2em;">{{tooltipItem.series}}</a><a *ngIf="tooltipShowTime==='DAY' || tooltipShowTime==='WEEK'" style=" font-size: 1.2em;"><br />{{tooltipItem.name | date: 'HH:mm'}} Uhr</a><a *ngIf="tooltipShowTime!=='DAY' && tooltipShowTime!=='WEEK'" style=" font-size: 1.3em; font-weight: 600;"><br />·</a><br /><a style=" font-size: 1.2em; font-weight: 600;">{{tooltipItem.name | date: 'dd.MM.yyyy'}} · </a><a style=" font-size: 1.3em; font-weight: 600;">{{tooltipItem.value}}</a>
</xhtml:div>
</xhtml:div>
</xhtml:ng-template>
<!-- Datapoints Y-Axis -->
<svg:g *ngFor="let series of data">
<svg:g ngx-charts-circle-series
[xScale]="xScale"
[yScale]="yScale"
[colors]="colors"
[data]="series"
[scaleType]="scaleType"
[visibleValue]="hoveredVertical"
[activeEntries]="activeEntries"
[tooltipDisabled]="tooltipDisabled"
[tooltipTemplate]="tooltipTemplate"
(select)="onClick($event, series)"
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
/>
</svg:g>
I'm trying to create custom buttons with assets that I've been sent by the designer. I want to use touchable highlight to create the buttons with the images in them.
<TouchableHighlight style={styles.touch}
onPress={() =>
Alert.alert('You tapped Sign In!')
}>
<Image
style={styles.button}
source={require('./signin/SignInButton.png')}
/>
</TouchableHighlight>
touch: {
backgroundColor: 'pink',
},
button: {
padding: 10,
width: Dimensions.get('window').width*0.7,
resizeMode: 'contain',
// height: Dimensions.get('window').height/3,
},
That's the code, the problem is the touchable area is too big, I want it to be just the button area. But I also want the button to be sized dynamically with the screen, for different screen sizes. So is there a way to fix the size of the Touchable based on the image size?
How to provide different background colors to each list item (non-selected) in the Kendo UI dropdown list rather than giving a common background color to the whole dropdown?
You should defined a template that sets the appropriate color.
Example:
Define the DataSource as:
var colors = [
"red",
"green",
"pink",
"blue",
"yellow"
];
And a template as:
<script id="template" type="text/kendo-script">
<div style="background-color: #= data #">#= data #</div>
</script>
Then your dropdownlist definition should be as:
var template = kendo.template($("#template").html())
$("#dropdownlist").kendoDropDownList({
dataSource: colors,
template : template
});
Working example here: http://jsfiddle.net/OnaBai/MzLrS/
I'm using jqPlot to create a pie chart with a legend. Part of my jqPlot pie options look as follows:
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
padding: 10,
showDataLabels: true,
dataLabelFormatString: '%.2f%%',
sliceMargin: 2,
startAngle: -90
}
},
legend: {
show: true,
location: 'e',
placement: 'outside',
xoffset: 1,
fontSize: '11px',
rowSpacing: '10px',
textColor: '#222222',
fontFamily: 'Lucida Grande, Lucida Sans, Arial, sans-serif'
}
Recently I've come across a case where there are many legend items (e.g., 21), which makes my legend box too tall. I'm wondering if there is a way to either
have a vertical scroll bar within the legend box
display the legend items in multiple columns (preferable)
I've tried setting the following properties:
numberRows
numberColumns
which I found from this page:
$.jqplot.PieRenderer options
however they don't seem to make any changes.
Would anybody be able to provide me with a good solution to this problem?
Try to go with the provided column/row settings. I double-checked personally that this settings do work. Just make sure that in legend you set the numberColumns or numberRows inside rendererOptions, like:
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
If this doesn't work then I must say some other bug must be hiding in your code, then let us see the code so we can find and squash the bug together :)