Develop Reference

Can a wind rose chart be created in ECharts?

A very common chart in weather and maritime is a wind rose chart.
Is it possible in echarts to create one of these? It has segmented bands of speed and various sectors per 0-360 directions. See sample chart below or a example of how Plotly gets it done in their library: https://plotly.com/javascript/wind-rose-charts/
If so, what would the code look like? I attempted to alter this sample (https://echarts.apache.org/examples/en/editor.html?c=bar-polar-stack-radial), but it seems in order to get the segmented bands we need to use category in the angleAxis which is not correct.

Take a look on this work. I found this chart (and similar) on the Echarts Gallery but gallery takes a very long time to load or not available on some days but today i'm lucky:
var myChart = echarts.init(document.getElementById('chart'));
var legendName = [
"0.0-0.2 m/s",
"0.3-1.5 m/s",
"1.6-3.3 m/s",
"3.4-5.4 m/s",
"5.5-7.9 m/s",
"8.0-10.7 m/s",
"10.8-13.8 m/s",
"13.9-17.1 m/s",
"17.2-20.7 m/s",
"20.8-24.4 m/s",
"24.5-28.4 m/s",
"28.5-32.6 m/s",
">32.6 m/s"
]
var vocs = [
"0.3 mg/m³",
"0.4 mg/m³",
"0.3 mg/m³",
"0.3 mg/m³",
"0.5 mg/m³",
"0.23 mg/m³",
"0.2 mg/m³",
"0.7 mg/m³",
"0.6 mg/m³",
"0.2 mg/m³",
"0.1 mg/m³",
"0.1 mg/m³",
"0.6 mg/m³",
];
var option = {
tooltip: {
trigger: 'item',
textStyle: {
color: '#fff'
}
},
color: ["#0001F7", "#00B8FE", "#00FFFF", "#00FF68", "#BEFE00", "#FFFF00", "#FFA800", "#E10100"],
angleAxis: {
type: 'category',
data: ["北", "北东北", "东北", "东东北", "东", "东东南", "东南", "南东南", "南", "南西南", "西南", "西西南", "西", "西西北", "西北", "北西北"],
boundaryGap: false, //标签和数据点都会在两个刻度之间的带(band)中间
axisTick: {
show: false //是否显示坐标轴刻度
},
splitLine: {
show: true,
lineStyle: {
// color:"black"
},
},
axisLabel: {
show: true,
interval: 1, //坐标轴刻度标签的显示间隔，在类目轴中有效
},
},
radiusAxis: {
min: 0,
max: 100,
axisLabel: {
show: false
},
axisTick: {
show: false //是否显示坐标轴刻度
},
axisLine: {
show: false //是否显示坐标轴轴线
},
},
polar: {},
series: [{
type: 'bar',
data: [17, 2, 18, 4,
2, 3, 4, 6,
1, 6, 3, 4,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[0],
stack: 'a'
}, {
type: 'bar',
data: [7, 12, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[1],
stack: 'a'
}, {
type: 'bar',
data: [10, 12, 13, 4,
2, 13, 14, 26,
11, 12, 23, 34,
12, 33, 34, 32
],
coordinateSystem: 'polar',
name: legendName[2],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
2, 3, 4, 6
],
coordinateSystem: 'polar',
name: legendName[3],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 4,
2, 3, 4, 6,
1, 2, 3, 4,
1, 2, 3, 1
],
coordinateSystem: 'polar',
name: legendName[4],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 2,
2, 3, 4, 6,
1, 2, 3, 2,
1, 2, 3, 1
],
coordinateSystem: 'polar',
name: legendName[5],
stack: 'a'
}, {
type: 'bar',
data: [10, 2, 13, 4,
2, 3, 4, 6,
1, 2, 3, 4,
2, 3, 4, 2
],
coordinateSystem: 'polar',
name: legendName[6],
stack: 'a'
}, {
type: 'bar',
data: [1, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0
],
coordinateSystem: 'polar',
name: legendName[7],
stack: 'a'
}],
legend: {
show: true,
data: legendName,
width: 500, //根据宽度调整换行
}
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:600px;"></div>

How to hide data in a series in highcharts boxplot?

I have a boxplot chart made with highcharts, and I have 2 series, one for the observations and one for the outliers. I want to hide one column in both of the series, but going through the API there doesn't seem to be a way to hide a data row, you can only remove one. Is there a way to do it with the API rather than having to hack my way around it?
Edit: Some examples on the structure:
series: [{
name: 'Observations',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"
}]},
{
name: 'Outliers',
type: 'scatter',
data: [
[0, 2],
[1, 5]
]
}
]
This structure has 2 series, with the first series having the boxes of the boxplot, and the second having the outliers. In other graphs, like the column graph, you can add each column as a series, which gives me more options to manipulate them, but here I have each column as a data array object. In Highcharts you can hide series by triggering the hide() function on the series, but you can't hide data objects, you can only remove them. What I want to do is hide a single data array object from rendering in the view.
As a workaround I can technically remove the object I want from data array and save it somewhere else, until I need it, but what I'm wondering is whether there's a better way of doing that, maybe using plotPoints or any other way.
Here's also a demo from the highcharts website. The data here are an array, but anything in the data API above still work on them. Here's the series api for comparison.

You can borrow setVisible method from pointClass in pie series prototype:
var pieSetVisible = Highcharts.seriesTypes.pie.prototype.pointClass.prototype.setVisible,
point1 = chart.series[0].points[0],
point2 = chart.series[1].points[0];
pieSetVisible.call(point1);
pieSetVisible.call(point2);
Live demo: http://jsfiddle.net/BlackLabel/ahckoLn5/

I found a solution. There are apparently 2 alternative ways to setup a Boxplot chart using series (which you can hide and show using the legend or the hide() and show() methods):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}, {
type: 'scatter',
data: [[0, 1], [0,2]] // outlier points
}]},
{
name: 'Series 2',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
// no outliers here
}
]
Basically you can put Observations and Outliers in one series/column, by giving the outliers type: 'scatter' as shown above. The problem with this method is that you still can't hide the outliers for some reason by calling the hide() and show() methods.
The alternative way of doing this is putting each column observations and each outlier observations in a separate series, and giving both the same x value (the outliers should have the x of the box, in this example it's 0):
series: [{
name: 'Series 1',
data: [{
x: 0,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point x1",
color: "#00FF00"
}]},
{
type: 'scatter',
name: 'Series 2: Outliers',
data: [[0, 1], [0,2]]
}
{
name: 'Series 3',
data: [{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point x2",
color: "#FF00FF"
}]
}
]
To stack the observations and outliers over each other you have to disable grouping in the options:
plotOptions: {
series: {
grouping: false,
}
},

Total value contains part of current value in highcharts

how can I do something with my columns value in highcharts? I have two values: "total" and "current". Total is always bigger becouse it contains current value. I write some example in js Fiddle:
link to example
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
stack: 'male'
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
}, {
name: 'Jane Total',
data: [8, 5, 9, 8, 9],
stack: 'female'
}, {
name: 'Jane Current',
data: [1, 0, 4, 4, 3],
stack: 'female'
}]
I want to dislplay chart where total value is a maxiumm value of column and current column as a part of total column. In my example in first column of "John Total" should be 8 and have part of "John Current" which is 3. In my code example values is summed and finish value is 11. How can I fix that and got columns like in picture?
This series have maxium values:
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
},
And this series have results as a part of total. How many points John get from Total:
{
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
},
So first column should have max value 8 and include 3 like in picture. Blue column on picture should have 8 becouse we have this in first array and black column should to have 3. How can I acheive this when I have got Maxium value and part of this value In one column?

As per your comment
How can I acheive this when I have got Maxium value and part of this value In one column?
In this case you cannot use
stacking: 'normal'
You have to use overlapping column charts
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4 //added padding to give some spacing between column
},
},
And series with
series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];
here x value represents the position of the column(if you don't define x in series, column will overlap each other)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4
},
},
series: [{
name: 'Jane Total',
data: [{
y: 8,
x: 0.20
}, {
y: 5,
x: 1.20
}, {
y: 9,
x: 2.20
}, {
y: 8,
x: 3.20
}, {
y: 9,
x: 4.20
}, ]
}, {
name: 'Jane Current',
data: [{
y: 1,
x: 0.20
}, {
y: 0,
x: 1.20
}, {
y: 4,
x: 2.20
}, {
y: 4,
x: 3.20
}, {
y: 3,
x: 4.20
}, ]
}, {
name: 'John Total',
data: [8, 9, 4, 7, 6],
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Update as per OP
I want to deliver array with values under variable to data: and I want fill only Y axis without writing {y:array1}, {y:array2} for every value in array
For this you can use array map function to update array of object
$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
Updated fiddle demo

plotly.js reduce the margin between yAxis title and the axis numbers

i want to be able to reduce the margin between the yAxis title and the axis numbers, i cant find any property or function in plotly.js documentation mentioning it
an example of the code here
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
name: 'Name of Trace 1',
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
name: 'Name of Trace 2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Plot Title',
xaxis: {
title: 'x Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'y Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
Plotly.newPlot('myDiv', data, layout);
also here is a codepen link codepen

If someone's searching for this solution , then it's available now , use the 'standoff' property .
Something like this :
var layout = {
margin: {t:0,r:0,b:0,l:20},
xaxis: {
automargin: true,
tickangle: 90,
title: {
text: "Month",
standoff: 20
}},
yaxis: {
automargin: true,
tickangle: 90,
title: {
text: "Temprature",
standoff: 40
}}}

As far as I know you cannot do it directly but you have at least two possibilities, see the discussion here.
Move the axis label directly
document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1
or add an annotation to layout and specify its position
annotations: [
{
x: 0.5,
y: -0.15,
xref: 'paper',
yref: 'paper',
text: 'I am not an axis label',
showarrow: false,
}
]
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
name: 'Name of Trace 1',
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
name: 'Name of Trace 2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Plot Title',
xaxis: {
title: 'x Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'y Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
annotations: [
{
x: 0.5,
y: -0.15,
xref: 'paper',
yref: 'paper',
text: 'I am not an axis label',
showarrow: false,
}
]
};
Plotly.newPlot('myDiv', data, layout);
document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 100%; height: 500px;"></div>

Proper x-axis for Highcharts stack group column

I'm trying to develop a chart that visualizes data using 1 measurement and 3 dimensions. I put one dimension on the x-axis, one as stack and one as list of series.
HighCharts has the stacked-grouped-column chart that I use as basis. See my jsfiddle.
series: [{
name: 'John',
color: '#ff4400',
data: [5, 3, 4, 7, 2],
stack: '2014'
}, {
name: 'Joe',
color: '#44ff00',
data: [3, 4, 4, 2, 5],
stack: '2014'
}, {
name: 'John',
color: '#ff4400',
data: [2, 5, 6, 2, 1],
showInLegend: false,
stack: '2015'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
color: '#44ff00',
showInLegend: false,
stack: '2015'
}]
I would like to be able to display the stack name on a second level x-axis. I know of the group-plugin, but that does not seems to work together with stacks.
Any hints?

It might not be the best solution (so please keep 'm coming), but I now fake a dataseries.
See jsfiddle update
xAxis: [{
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
{
categories: ['2014', '2015', '2014', '2015', '2014', '2015','2014', '2015', '2014', '2015'],
opposite: true
}],
series: [{
name: 'John',
color: '#ff4400',
data: [5, 3, 4, 7, 2],
stack: '2014',
}, {
name: 'Joe',
color: '#44ff00',
data: [3, 4, 4, 2, 5],
stack: '2014',
}, {
name: 'John',
color: '#ff4400',
data: [2, 5, 6, 2, 1],
showInLegend: false,
stack: '2015'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
color: '#44ff00',
showInLegend: false,
stack: '2015'
}, {
name: '',
data: [0, 0, 0,0, 0, 0,0, 0, 0,0],
showInLegend: false,
stack: '2015',
xAxis: 1
}]
Result:
Update
Fiddled around with fake axis labels: http://jsfiddle.net/b72e0vh4/8/