How to set vue chartjs begin at zero? - vue.js

i have horizontalBar from chartjs using vue, i want to set the scale to begin with zero, i already add this code inside my options
scales: {
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
min: 0,
}
}]
},
scaleBeginAtZero : true,
but it doesn't work out.
data() {
return {
data: {
labels: this.listLabel,
datasets: [{
label: "Usage",
backgroundColor: "#41946E",
data: this.listData
}]
},
options: {
legend: {
display: false,
},
label:{
display: true
},
scales: {
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
min: 0,
}
}]
},
scaleBeginAtZero : true,
}
}
},
i want it to look like this https://ibb.co/nPfmbDf, but i got it like this https://ibb.co/z7D2tP4 as you can see, Device 5 has 10 as a value but it showed no bar.


write that inside options.
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
Here is the link https://www.chartjs.org/docs/latest/developers/updates.html from Chartjs

Related

How to customize Y-Axis label in Chart.js with Vue.js?

I saw many solutions in Stackoverflow but no one is solving my problem.
I want to change the scale of my y axis values.
It will be
0
100
200
300
My Code:
yAxis: [{
type: 'value',
axisTick: {
show: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 100,
min: 0,
max: 300
}
}]
},
axisLabel: {//},
}],
series: [{
//
lineStyle: {//},
areaStyle: {
normal: {
//
},
itemStyle: {
normal: {
//
}
},
data: [236, 0]
}]
I have changed this also.
axisTick: {
show: false
}

Please use this live example to compare your settings with the example's working settings.
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Points',
data: [236, 0],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 300,
stepSize: 100,
reverse: false,
beginAtZero: true
}
}]
}
}
}

RadarChart questions

I have modified the RadarChart sample.
I'd like to draw full circles on dataset values, on the blue line in the screenshot below.
I'd like to draw grid lines only on x axis and set its color to black (now red) and get rid of the scale values on the y axis and set line color to black.
The state is the following:
{
data: {
$set: {
dataSets: [
{
values: [
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 }
],
label: "Too High",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#D9C5C5"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 }
],
label: "High",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#F1DB93"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 }
],
label: "OK",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#CADFB8"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 }
],
label: "Too Low",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#D9C5C5"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 }
],
label: "DS 1",
config: {
color: processColor("#0022F5"),
lineWidth: 2,
drawValues: false,
drawCircles: true,
circleColor: processColor("#0022F5"),
drawCircleHole: false,
}
}
]
}
},
xAxis: {
$set: {
valueFormatter: ["PRV", "HR", "RR", "O2", "E.A.", "ASI", "PAI"]
}
},
yAxis: {
$set: {
axisMinimum: 0,
axisMaximum: 1
}
}
}
And the control props:
<RadarChart
style={styles.chart}
data={this.state.data}
xAxis={this.state.xAxis}
yAxis={this.state.yAxis}
chartDescription={{ text: "" }}
legend={this.state.legend}
drawWeb={true}
webLineWidth={0}
webLineWidthInner={1}
webAlpha={255}
webColor={processColor("red")}
webColorInner={processColor("green")}
skipWebLineCount={0}
onSelect={this.handleSelect.bind(this)}
onChange={event => console.log(event.nativeEvent)}
rotationAngle={-115}
/>
Steps to Reproduce the Problem
It seems that:
drawCircles: true,
circleColor: processColor("#0022F5"),
drawCircleHole: false,
Has no effect regarding the circles.
I do not know what to do with the y scale.
Any help appreciated.
Note that I'm using react-native-charts-wrapper over mpandroidchart.
Any help appreciated.
EDIT 10/17/2019
Long story short, I've created a webAlphaInner property for the RadarChart, which allows me to make the "inner-web" lines transparent.
No circle on the blue line.

Drawing Circle - I am unable to find Radar charts having a
drawCircle support.
For the second query
Changing red to black - This red is webColor. webColor={processColor("black")}
Get rid of scale - In Yaxis set enabled: false,
Set Line color to black- In this I am assuming you mean the green color line. webColorInner={processColor("black")}
Here are the complete code snippet
State
{
data: {
$set: {
dataSets: [
{
values: [
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 },
{ value: 1 }
],
label: "Too High",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#D9C5C5"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 },
{ value: 0.75 }
],
label: "High",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#F1DB93"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 }
],
label: "OK",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#CADFB8"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 },
{ value: 0.25 }
],
label: "Too Low",
config: {
color: processColor("#000000"),
drawFilled: true,
fillColor: processColor("#D9C5C5"),
fillAlpha: 100,
lineWidth: 0,
drawValues: false
}
},
{
values: [
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 },
{ value: 0.5 }
],
label: "DS 1",
config: {
color: processColor("#0022F5"),
lineWidth: 2,
drawValues: false,
drawCircles: true,
circleColor: processColor("#0022F5"),
drawCircleHole: false,
},
}
]
}
},
xAxis: {
$set: {
valueFormatter: ["PRV", "HR", "RR", "O2", "E.A.", "ASI", "PAI"],
}
},
yAxis: {
$set: {
axisMinimum: 0,
axisMaximum: 1,
enabled: false,
}
}
}
Component
<RadarChart
style={styles.chart}
data={this.state.data}
xAxis={this.state.xAxis}
yAxis={this.state.yAxis}
chartDescription={{ text: "" }}
legend={this.state.legend}
drawWeb={true}
webLineWidth={1}
webLineWidthInner={2}
webAlpha={255}
webColor={processColor("black")}
webColorInner={processColor("black")}
skipWebLineCount={0}
onSelect={this.handleSelect.bind(this)}
onChange={event => console.log(event.nativeEvent)}
rotationAngle={-115}
/>

How add padding or change height of bottom tabs RNN

I have to change the height or add padding to the bottom tab, but I really can't, I tried several solutions and I can't find the way...
On the other hand, it's not doing the animated:true animations either, is the place okay?
Use react native navigation (wix) v2
Navigation.setRoot({
root: {
bottomTabs: {
id: 'BottomTabsId',
options: {
bottomTabs: {
backgroundColor: colors.tabBackgroundColor(),
animate: true,
},
},
children: [
{
stack: {
children: [
{
component: {
name: 'onBoarding',
},
},
],
options: {
bottomTab: {
icon: homeOff,
testID: 'FIRST_TAB_BAR_BUTTON',
...optionsBottomTab,
},
topBar: {
visible: false,
drawBehind: true,
},
},
},
},
{
stack: {
children: [
{
component: {
name: 'logIn',
},
},
],
options: {
bottomTab: {
icon: compassOff,
testID: 'SECOND_TAB_BAR_BUTTON',
...optionsBottomTab,
},
topBar: {
visible: false,
drawBehind: true,
},
},
},
},
{
stack: {
children: [
{
component: {
name: 'signup',
},
},
],
options: {
bottomTab: {
icon: circlePlus,
testID: 'THIRD_TAB_BAR_BUTTON',
},
topBar: {
visible: false,
drawBehind: true,
},
},
},
},
{
stack: {
children: [
{
component: {
name: 'welcome',
},
},
],
options: {
bottomTab: {
icon: bellOff,
testID: 'FOURTH_TAB_BAR_BUTTON',
...optionsBottomTab,
},
topBar: {
visible: false,
drawBehind: true,
},
},
},
},
{
stack: {
children: [
{
component: {
name: 'home',
},
},
],
options: {
bottomTab: {
icon: userOff,
testID: 'FIFTH_TAB_BAR_BUTTON',
...optionsBottomTab,
},
topBar: {
visible: false,
drawBehind: true,
},
},
},
},
],
},
},
});
Photo of my problem:
the + button has a good size, but I need the bottom tab to be larger than the

Changing BottomTabs height is currently not supported by RNN.
animate: true isn't a valid property of a layout node - it should be specified in options.bottomTabs. See the https://wix.github.io/react-native-navigation/#/docs/styling?id=options-object-format for more details on the options object format.

Setting default to 0 in vuechart.js HorizontalBar

I'm making a vuechart.js Horizontal Barchart, and I want the minimum/default to be set to 0. I am a noob, however. So I do not know if I am coding the "options" right. I tried a few things but nothing seems to have effect on the axys.
My latest try:
export default ({
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
this.renderChart({
labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],
datasets: [{
label: 'Yeet', backgroundColor: 'black', data: [10, 20, 30, 40]
}]
},
{
responsive: true, maintainAspectRatio: false
},
{
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}]
},
})
}
})
Another of my attempts:
export default {
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
this.renderChart({
labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}],
yAxes: [{
ticks: {
beginAtZero: true,
},
stacked: true
}]
},
datasets: [
{label: 'Yeet', backColor: 'black', data: [10, 20, 30, 40]}
]
}, {responsive: true, maintainAspectRatio: false})
}
}
And one more just because!
export default {
extends: HorizontalBar,
props: ['agentTickets', 'options'],
mounted() {
this.renderChart({
labels: ['Ferry', 'Carlo', 'Menno', 'Scott'],
options: {
scale: {
xAxes: [{
ticks: {
min: 0,
},
stacked: true
}],
yAxes: [{
ticks: {
min: 0,
},
stacked: true
}]
}
},
datasets: [
{label: 'Yeet', backdropColor: 'black', data: [10, 20, 30, 40]}
]
}, {responsive: true, maintainAspectRatio: false})
}
}
(I've tried the latest example with beginAtZero too)
Above are the current results, what I want is a graph that starts at 0, instead of 10.

Fixed. Appearantly the options was already created (where responsive and maintainAspectRatio were defined). Just copied the scales between those curly bracers and it works!

extjs 4 - Unable to expand a dynamically generated tree

I have a requirement to create a tree grid which has unknown number of columns and data which gets rendered on click on a button. I have following code for the same.
//Model
Ext.define('SM.model.DynamicTreeModel', {
extend: 'Ext.data.Model'
});
//Store
Ext.define('SM.store.DynamicTreeStore',{
extend:'Ext.data.TreeStore',
model:'SM.DynamicTreeModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'TGData1.json',
reader: {
type: 'json',
root: 'children'
}
},
autoLoad: true
});
Ext.define('SM.view.compareScenario.DynamicTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.DynamicTree',
frame: true,
columnLines: true,
autoLoad: false,
initComponent: function(){
var config = {
columns: [],
rowNumberer: false
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
this.callParent(arguments);
},
storeLoad: function(){
var columns = [];
Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
columns.push(column);
});
this.reconfigure(this.store, columns);
this.store.getRootNode(this.store.getRootNode);
},
onRender: function(ct, position){
SM.view.compareScenario.DynamicTree.superclass.onRender.call(this, ct, position);
this.store.load({
scope: this,
callback: function(records, operation, success) {
this.storeLoad();
}
});
}
});
var influencesTree = {
xtype: 'DynamicTree',
id: 'influencesTree',
pading: '5',
region: 'south',
height: '70%',
collapsible: true,
rootVisible: false,
store: 'DynamicTreeStore'
};
The json file is as follows:
{
"metaData": {
"fields": [
{"name":"0", "type":"string"},
{"name":"1", "type":"string"},
{"name":"2", "type":"string"}
]
},
"columns" : [
{
"xtype":"treecolumn", //this is so we know which column will show the tree
"text":"Override Type",
"flex":"2",
"sortable":"true",
"dataIndex":"0"
},
{
"text":"Scenario 1",
"dataIndex":"1"
},
{
"text":"Copied Scenario",
"dataIndex":"2"
}
]
,
"text": ".",
"children": [{
"0":"CFO",
"1":"15",
"2":"16",
"children":[{
"0":"AW",
"1": "5",
"2": "5",
"leaf": "true",
},
{
"0":"AV",
"1":"10",
"2":"11",
"leaf": "true",
}
]
}
]
}
The tree renders, but the child nodes cannot be expanded as the + icon is not shown. Instead of + icon, a checkbox is rendered.
Any help/suggestions for the same will be highly appreciated.
Thanks,
Shalini

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*']);
Ext.onReady(function () {
var myData = [{
name: "Rec 0",
type: "0"
}, {
name: "Rec 1",
type: "1"
}, {
name: "Rec 2",
type: "2"
}, {
name: "Rec 3",
type: "3"
}, {
name: "Rec 4",
type: "4"
}, {
name: "Rec 5",
type: "5"
}, {
name: "Rec 6",
type: "6"
}, {
name: "Rec 7",
type: "7"
}, {
name: "Rec 8",
type: "8"
}, {
name: "Rec 9",
type: "9"
}];
// create the data store
var firstGridStore = Ext.create('Ext.data.Store', {
model: 'Apps.demo.model.Resource',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: Ext.JSON.encode(myData)
},
delay: 0
}
});
// Column Model shortcut array
var columns = [{
text: "Name",
flex: 1,
sortable: true,
dataIndex: 'name'
}, {
text: "Type",
width: 70,
sortable: true,
dataIndex: 'type'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
drop: function (node, data, dropRec, dropPosition) {
}
}
},
store: firstGridStore,
columns: columns,
stripeRows: true,
title: 'First Grid',
margins: '0 2 0 0'
});
// create the destination Grid
var secondTree = Ext.create('Apps.demo.view.TreeGrid', {
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
ddGroup: 'selDD'
},
listeners: {
beforedrop: function (node, data) {
data.records[0].set('leaf', false);
data.records[0].set('checked', null);
},
drop: function (node, data, dropRec, dropPosition) {
firstGrid.store.remove(data.records[0]);
}
}
}
});
var displayPanel = Ext.create('Ext.Panel', {
width: 650,
height: 300,
layout: {
type: 'hbox',
align: 'stretch',
padding: 5
},
renderTo: 'panel',
defaults: {
flex: 1
}, //auto stretch
items: [
firstGrid,
secondTree],
dockedItems: {
xtype: 'toolbar',
dock: 'bottom',
items: ['->', // Fill
{
text: 'Reset both components',
handler: function () {
firstGridStore.loadData(myData);
secondTreeStore.removeAll();
}
}]
}
});
});
var response = Ext.JSON.encode({
"children": [{
"itemId": 171,
"type": "comedy",
"name": "All the way",
"children": [{
"leaf": true,
"itemId": 171,
"type": "actor",
"name": "Rowan Atkinson"
}],
}, {
"itemId": 11,
"type": "fantasy",
"name": "I love You",
"children": [{
"itemId": 11,
"leaf": true,
"type": "actor",
"name": "Rajan",
}]
}, {
"itemId": 173,
"type": "Action",
"name": "Fast and Furious",
"children": [{
"itemId": 174,
"type": "actor",
"name": "Dwayne Johnson",
"children": [{
"leaf": true,
"itemId": 175,
"type": "wrestler",
"name": "The Rock"
}]
}]
}]
});
Ext.define('Apps.demo.model.Resource', {
extend: 'Ext.data.Model',
fields: [{
name: "name",
type: "string"
}, {
name: "type",
type: "string"
}]
});
Ext.define('Apps.demo.view.TreeGrid', {
extend: 'Ext.tree.Panel',
title: 'Demo',
height: 300,
rootVisible: true,
singleExpand: true,
initComponent: function () {
Ext.apply(this, {
store: new Ext.data.TreeStore({
model: 'Apps.demo.model.Resource',
"root": {
"name": "",
"type": "",
"expanded": "true"
},
proxy: {
type: 'ajax',
url: '/echo/json/',
actionMethods: {
read: 'POST'
},
extraParams: {
json: response
},
delay: 0
}
}),
listeners: {
'beforeiteminsert' : function(obj, node) {
console.log(node);
}
},
columns: [{
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Type',
dataIndex: 'type'
}]
});
this.callParent();
}
});
var grid = Ext.create('Apps.demo.view.TreeGrid');
Please check this code .It might not give u the proper answer but will surely give u the hint how to achieve the output.