How to change bar color in Echarts - vue.js

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:

Related

Multiple Groups in Vega Bar Chart with individual bars

i'm trying to do a multiple axis / multiple grouped vega chart.
This is what I'm trying to achieve:
I want to be able to sort the data first into years: 2018, 2019 etc. Then I want it split into the " 0,1,2,3" categories and after that I want to see the data per each size "s,m,l" etc.
Basically, what I want to have is: How many tshirt of the size "M" from the "3rd batch" i had in 2019.
I hope i made it pretty clear.
I don't want stacked bars, but individual bars.
Also, I want the top axis to have different colors depending on the years.
I would appreciate any help possible.
This is what i have so far:
{
$schema: https://vega.github.io/schema/vega/v4.json
padding: {left: 5, top: 25, right: 5, bottom: 50}
data: [
{
name: source_0
values: [
{speedName: "A", connectionType: "s", speedCount: 0.1, speedValue: "2018"}
{speedName: "A", connectionType: "m", speedCount: 0.3, speedValue: "2018"}
{speedName: "A", connectionType: "l", speedCount: 0.5, speedValue: "2018"}
{speedName: "A", connectionType: "s", speedCount: 0.6, speedValue: "2019"}
{speedName: "A", connectionType: "m", speedCount: 0.3, speedValue: "2019"}
{speedName: "A", connectionType: "l", speedCount: 0.5, speedValue: "2019"}
{speedName: "A", connectionType: "l", speedCount: 0.9, speedValue: "2020"}
{speedName: "B", connectionType: "s", speedCount: 0.7, speedValue: "2019"}
{speedName: "B", connectionType: "m", speedCount: 0.2, speedValue: "2020"}
{speedName: "B", connectionType: "l", speedCount: 1.1, speedValue: "2018"}
{speedName: "C", connectionType: "s", speedCount: 0.6, speedValue: "2020"}
{speedName: "C", connectionType: "m", speedCount: 0.1, speedValue: "2018"}
{speedName: "C", connectionType: "l", speedCount: 0.2, speedValue: "2021"}
]
transform: [
{
type: collect
sort: {
field: ["connectionType", "speedName", "speedValue"]
order: ["ascending", "ascending", "ascending"]
}
}
{
type: collect
sort: {
field: ["connectionType", "speedValue", "speedNameSort"]
order: ["ascending", "ascending", "ascending"]
}
}
{type: "filter", expr: "datum.speedCount < 100"}
{
type: aggregate
groupby: ["speedValue", "speedName", "connectionType"]
ops: ["sum", "count"]
fields: ["speedCount", "speedValue"]
as: ["speedCount", "count"]
}
]
}
{
name: data_0
source: source_0
transform: [
{
type: aggregate
groupby: ["speedName", "connectionType", "speedValue"]
ops: ["sum"]
fields: ["speedCount"]
as: ["speedCount"]
}
{
type: filter
expr: (datum["speedCount"]) && isFinite(+datum["speedCount"])
}
]
}
{
name: column_domain
source: data_0
transform: [
{
type: aggregate
groupby: ["speedValue"]
}
]
}
]
signals: [
{name: "x_step", value: 30}
{
name: child_width
update: bandspace(domain('x').length, 0.1, 0.05) * x_step
}
{name: "child_height", value: 200}
]
layout: {
padding: 25
columns: {signal: "length(data('column_domain'))"}
bounds: full
align: all
}
marks: [
{
name: row_header
type: group
role: row-header
encode: {
update: {
height: {signal: "child_height"}
}
}
axes: [
{
orient: left
scale: y
domain: false
grid: false
labelOverlap: true
ticks: false
domain: false
labelPadding: 10
tickCount: {signal: "ceil(child_height/40)"}
offset: 2
tickCount: {signal: "ceil(child_height/40)"}
zindex: 0
labelColor: "#6c6c6c"
}
]
}
{
name: column_header
type: group
role: column-header
from: {data: "column_domain"}
sort: {field: "datum[\"speedValue\"]", order: "ascending"}
encode: {
update: {
width: {signal: "child_width"}
}
}
marks: [
{
name: rule
from: {data: "column_domain"}
type: rect
encode: {
enter: {
stroke: {scale: "colors", field: "speedValue"}
}
update: {
x: {signal: 0}
y: {signal: "-25"}
x2: {signal: "child_width"}
fill: {scale: "colors", field: "speedValue"}
strokeWidth: {signal: "2"}
}
}
}
{
type: text
from: {data: "column_domain"}
encode: {
update: {
x: {signal: "child_width/2", field: "speedValue"}
y: {signal: "-35"}
x2: {signal: "child_width"}
fill: {scale: "colors", field: "speedValue"}
fontSize: {signal: "child_width/10 + 5"}
align: {value: "center"}
text: {
signal: (parent["speedValue"]) ? parent["speedValue"] : ""+parent["speedValue"]
}
}
}
}
]
}
{
name: column_footer
type: group
role: column-footer
from: {
facet: {
name: facet
data: data_0
groupby: ["speedValue"]
}
}
sort: {field: "datum[\"speedValue\"]", order: "ascending"}
encode: {
update: {
width: {signal: "child_width"}
}
enter: {
x: {scale: "x", field: "speedName"}
}
}
axes: [
{
orient: bottom
scale: x
labelPadding: 25
labelAngle: 0
labelAlign: right
labelBaseline: middle
labelOverlap: true
ticks: false
speedValue: x
labelColor: "#6c6c6c"
grid: false
domainColor: "#6c6c6c"
domainWidth: 2.5
zindex: 0
}
]
marks: [
{
type: group
from: {
facet: {data: "facet", name: "facet", groupby: "speedName"}
}
encode: {
enter: {
x: {scale: "x", field: "speedName"}
}
}
scales: [
{
name: pos
type: band
range: width
domain: {data: "facet", field: "connectionType"}
}
]
axes: [
{
orient: bottom
scale: pos
labelAngle: 0
labelAlign: middle
labelBaseline: middle
labelOverlap: true
ticks: false
labelColor: "#6c6c6c"
grid: false
domainColor: "#6c6c6c"
domainWidth: 2.5
zindex: 0
offset: 10
}
]
}
]
}
{
name: cell
type: group
style: cell
from: {
facet: {
name: facet
data: data_0
groupby: ["speedValue"]
}
}
sort: {
field: ["datum[\"speedValue\"]"]
order: ["ascending"]
}
encode: {
update: {
width: {signal: "child_width"}
height: {signal: "child_height"}
}
}
marks: [
{
type: group
from: {
facet: {data: "facet", name: "facet", groupby: "speedName"}
}
encode: {
enter: {
x: {scale: "x", field: "speedName"}
}
}
scales: [
{
name: pos
type: band
range: width
domain: {data: "facet", field: "connectionType"}
}
]
axes: [
{
orient: bottom
scale: pos
tickSize: 3
labelPadding: 2
offset: 5
ticks: false
labels: false
}
]
marks: [
{
name: child_marks
type: rect
style: ["bar"]
from: {data: "facet"}
encode: {
update: {
fill: {scale: "color", field: "connectionType"}
ariaRoleDescription: {value: "bar"}
tooltip: {
signal: '''{"Speed Type": ''+datum["speedName"], "Speed": ''+datum["speedValue"], "Speed Count": datum['speedCount'], "Connection Type": ''+datum["connectionType"]}'''
}
x: {scale: "x", field: "connectionType"}
width: {scale: "x", band: 1}
y: {scale: "y", field: "speedCount"}
y2: {scale: "y", value: "0"}
}
}
}
]
}
]
}
]
scales: [
{
name: x
type: band
domain: {data: "data_0", field: "speedName"}
range: {
step: {signal: "x_step"}
}
paddingInner: 0.1
paddingOuter: 0.05
}
{
name: y
type: linear
domain: {data: "data_0", field: "speedCount"}
range: [
{signal: "child_height"}
0
]
nice: true
zero: true
}
{
name: color
type: ordinal
domain: {data: "source_0", field: "connectionType", sort: true}
range: [
"#e20074"
"#000000"
"#6c6c6c"
"#b3b3b3"
"#1063ad"
"#1bada2"
"#ea75b6"
]
}
{
name: colors
type: ordinal
domain: [2018, 2019, 2020, 2021, 2022]
range: ["#ff9a1e", "#bfcb44", "#1bada2", "#53baf2", "#1063ad"]
}
]
legends: [
{
fill: color
direction: vertical
padding: 10
encode: {
symbols: {
update: {
shape: {value: "square"}
}
}
}
}
]
}
And this is how it looks so far:
result so far

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 can I extend the x-axis on a Highcharts graph?

I have a Highcharts bar graph. Each point has a group of results, however the first and last element are being cropped. How can I extend the x-axis so every bar is shown?
In the image below each group has the same results so you can see the N and P are dropped from the first group and S and Mg from the last grouping.
The data is coming from a database, so i don't know how many groups there will be, or what range (so simply adding a day to each end is not sufficient, the overlap could be larger or smaller)
const conf = {
chart: {
type: "column",
animation: false,
marginRight: 10,
dateFormat: "dd/mm/YYYY"
},
title: {
text: "Spread Events"
},
xAxis: {
type: "datetime",
tickPixelInterval: 50
},
yAxis: {
title: {
text: "Spread"
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
]
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: this.state.graphData
};
and this is the graphData from the example
[
{
"name": "N",
"data": [[1559669642443, 300], [1559343600000, 300], [1559257200000, 300]]
},
{
"name": "P",
"data": [[1559669642443, 160], [1559343600000, 160], [1559257200000, 160]]
},
{
"name": "K",
"data": [[1559669642443, 470], [1559343600000, 470], [1559257200000, 470]]
},
{
"name": "S",
"data": [[1559669642443, 120], [1559343600000, 120], [1559257200000, 120]]
},
{
"name": "Mg",
"data": [[1559669642443, 90], [1559343600000, 90], [1559257200000, 90]]
}
]
You have Highcharts error #15 in a console, which means that your data is not sorted. Highcharts requires sorted data in ascending X order:
series: [{
...,
data: [
[1559257200000, 300],
[1559343600000, 300],
[1559669642443, 300]
]
}, ...
]
Live demo: http://jsfiddle.net/BlackLabel/y2rzd65m/

how to get scripted dashboard with graphite as data source?

How to get metric from graphite data source?
I've got this script, but it's generate random metric from fake data source.
Image:
Where I can set graphite data source in this script
'use strict';
var window, document, ARGS, $, jQuery, moment, kbn;
var dashboard;
var ARGS;
dashboard = {
rows : [],
schemaVersion: 13,
};
dashboard.title = 'Scripted and templated dash';
dashboard.time = {
from: "now-6h",
to: "now"
};
var rows = 1;
var seriesName = 'argName';
if(!_.isUndefined(ARGS.name)) {
seriesName = ARGS.name;
}
dashboard.rows.push({
title: 'Chart',
height: '300px',
panels: [
{
title: 'Events',
type: 'graphite',
span: 12,
fill: 1,
linewidth: 2,
targets: [
{
'target': 'stats.gauges.WidgetOccurrences.places.300'
}
],
}
]
});
return dashboard;
Try with data source value.
// Intialize a skeleton with nothing but a rows array and service object
dashboard = {
__inputs: [{
'name': "DS",
'label': "datasource_label",
'description': "",
'type': "datasource",
'pluginId': "datasource_plugin_id",
'pluginName': "datasource_plugin_name"
}],
__requires: [{
'type': 'panel',
'id': 'graph',
'name': 'Graph',
'version': ''
},
{
'type': 'datasource',
'id': 'datasource_plugin_id',
'name': 'datasource_plugin_name',
'version': '1.0.0'
}
],
editable: true,
rows: [],
};
dashboard.title = 'Scripted';
dashboard.time = {
from: 'now-36h',
to: 'now'
};
dashboard.rows.push({
title: 'Chart',
height: '300px',
panels: [{
title: 'Variable Importance',
type: 'graph',
span: 12,
fill: 1,
linewidth: 2,
datasource: 'datasource_label',
targets: [{
"target": "target"
}],
seriesOverrides: [],
tooltip: {
shared: true,
sort: 0,
value_type: 'individual'
},
xaxis: {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
yaxes: [{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
]
}]
});
return dashboard;