Setting default to 0 in vuechart.js HorizontalBar - vue.js

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!

Related

How to change bar color in Echarts

I'm using Echarts with vue and I created a bar chart and I want to change the color of each bar in this chart. I tried the code below but it just changes the color of the first one.
optionYear: {
legend: {},
color: ["#14323F", "green", "red", "purple", "yellow", "black"], // tried this to change bar color
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params) {
return params[0].data[1] + "%";
},
},
dataset: [
{
dimensions: ["name", "value"],
source: [[], [], [], [], [], []],
},
{
transform: {
type: "sort",
config: { dimension: "value", order: "desc" },
},
},
],
xAxis: {
type: "category",
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {},
series: {
type: "bar",
encode: { x: "name", y: "value" },
datasetIndex: 1,
},
},
To meet your requirement (set color to each x-axis), you should set itemStyle function in the option.series, here's the code:
option = {
series: {
// This is the key part
itemStyle: {
color: function (param) {
const color = ["#14323F", "green", "red", "purple", "yellow", "black"];
// param.value[0] is the x-axis value
return color[param.value[0] % color.length]
}
},
type: "bar",
encode: { x: "name", y: "value" },
datasetIndex: 1,
},
legend: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params) {
return params[0].data[1] + "%";
},
},
dataset: [
{
dimensions: ["name", "value"],
source: [[0, 10], [1, 20], [2, 30], [4, 40], [5, 50], [6, 60]],
},
{
transform: {
type: "sort",
config: { dimension: "value", order: "desc" },
},
},
],
xAxis: {
type: "category",
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {},
};
It will show like this, each bar of different x-axis will have a different color:
This option.color you set is for different series in the chart, for example, like a chart like this:

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 to set vue chartjs begin at zero?

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

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.