Related
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:
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}
/>
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
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/
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!