So i am attempting create a horizontal bar chart that has a horizontal line showing average.
So far i have attempted the following:
First added my barChart series (it comes from the following array):
"series": [
{
"value": 100, "label": "F1"
},
{
"value": 25, "label": "F2"
},
{
"value": 30, "label": "Jedi Jeremiah 555"
},
{
"value": 40, "label": "F4"
},
{
"value": 55, "label": "F5"
},
{
"value": 60, "label": "F6"
},
{
"value": 71, "label": "F7"
},
{
"value": 15, "label": "F8"
},
{
"value": 88, "label": "F9"
},
{
"value": 90, "label": "F10"
}
]
Which converts to an array of the following objects:
{name: 'F1', orientation: "h", x: [100], y: ["F1"]}
Then afterwards i add the following series:
{
name: 'average organization',
type: 'scatter',
x: [60],
orientation: 'h'
}
This creates the following chart:
As you can see there is only a blue dot indicating the average which is not the result im looking for.
I know that there are shapes however i wish to have it as a part of the chart so that you can either select or deselect it.
Does anyone know how you might achieve this?
It would help if you would provide a jsFiddle or codePen or other example to execute it directly:-)
I think the problem is, that you want to have a vertical line but set orientation: 'h' to the last "average-organisation"-object instead using orientation: 'v'.
I reproduced your example in a jsFiddle and add the desired behaviour:
https://jsfiddle.net/vepycde0/
Hope it helps:-)
Edit: For hiding the "0" on yAxis use y: [""] as seen in that jsFiddle: https://jsfiddle.net/vepycde0/1/
Related
I'm using https://github.com/hustcc/echarts-for-react
Desktop:
Mobile
When you click on the Save Icon the chart will be saved as you see, on mobile you will have less items/information than a desktop version.
I'm now looking for a way to export the Pie with a specific resolution, my problem is on mobile phones the pie is so small you don't see anything and i want to give the user the possible to export a bigger chart with more info. (which happens when the chart would be rendered in a higher resolution like 1920x1080).
I found a workaround, but this seems not a good solution, is rendering the chart 2 times (1 time in the FHD) and hide the second one so I can get a big image with all info i want. (see function gettest()
The problem: background is transparency.
Im also looking for 2 possibles solutions.
1.: use the saveas or other to export/rerender in 1920x1080 or
2.: add a white background to my hidden chart to export it over the workaround
I would prefer solution 1 but in the docs i haven't found anything like this.
Thanks in advance.
const option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
toolbox: {
feature: {
saveAsImage: {
backgroundColor: '#fff'
}
}
},
series: [
{
name: '',
type: 'pie',
radius: window.innerWidth < 1366 ? '50%' : '90%',
data: [
{
"value": 190.77828000000002,
"name": "Xtrackers FTSE Vietnam Swap UCITS ETF 1C"
},
{
"value": 190.70976,
"name": "Franklin FTSE India UCITS ETF USD Acc"
},
{
"value": 190.848,
"name": "Xtrackers MSCI Thailand UCITS ETF 1C"
},
{
"value": 493.81046,
"name": "VanEck Video Gaming and eSports UCITS ETF A USD"
},
{
"value": 462.71727,
"name": "Global X Video Games & Esports UCITS ETF"
},
{
"value": 695.53755,
"name": "Vanguard FTSE All-World UCITS ETF"
},
{
"value": 1748.34265,
"name": "BASF"
},
{
"value": 1233.9791,
"name": "Niu Tech ADR-A"
},
{
"value": 377.74,
"name": "AT&T"
},
{
"value": 359.4,
"name": "Sixt SE Inhaber-Vorzugsakt. o.St.o.N."
},
{
"value": 735.0396000000001,
"name": "Mercedes-Benz Group AG Namens-Aktien o.N."
},
{
"value": 901.6200000000001,
"name": "Ströer SE & Co. KGaA Inhaber-Aktien o.N."
},
{
"value": 209.99468,
"name": "Covestro AG Inhaber-Aktien o.N."
},
{
"value": 280.64384,
"name": "British American Tobacco PLC Registered Shares LS -,25"
},
{
"value": 1776.78144,
"name": "Allianz SE vink.Namens-Aktien o.N."
},
{
"value": 1156.9427999999998,
"name": "Unilever PLC Registered Shares LS -,031111"
},
{
"value": 1328.84396,
"name": "HeidelbergCement AG Inhaber-Aktien o.N."
},
{
"value": 692.69928,
"name": "Volkswagen AG Vorzugsaktien o.St. o.N."
},
{
"value": 855.93475,
"name": "Deutsche Post AG Namens-Aktien o.N."
},
{
"value": 1327.5,
"name": "Daimler Truck"
},
{
"value": 745.01694,
"name": "Lang & Schwarz N"
},
{
"value": 324.2454,
"name": "GSK Rg"
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b}: {d}%'}
},
],
};
function gettest(){
const echartInstance = echartRef.current.getEchartsInstance();
const base64 = echartInstance.getDataURL();
var link = document.createElement("a");
link.download = "Chart";
link.href = base64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
return (
<ReactECharts
option={option}
theme={"vintage"}
style={{ height: window.innerWidth < 1366 ? "200px" : "500px" }}/>
//my try with hidding the second chart where my background has transparency but i want white
<ReactECharts
option={option}
theme={"vintage"}
ref={(e) => { echartRef.current = e; }}
style={{ height: "1080px", width:"1920px", display:"none", backgroundColor:"red" }}/>
<div onClick={(e) => gettest(e)}>FHD Speichern</div>
)
I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
Chart working in 2D
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Chart NOT working in 3D
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}
The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
http://jsfiddle.net/v66zt28y
Based on this or similar examples I tried using kendo stacked chart.
To my suprise the chart gets displayed incorrectly.
$("#chart").kendoChart({
dataSource: new kendo.data.DataSource({
data: data,
group: {
field: "Serie"
}
}),
series:
[{
type: "column",
stack: true,
field: "Value"
},
],
categoryAxis: {
field: "Category"
}
});
I tried defining also the model as in attached plunker or various other variations, but the data is still incorrect e.g. 2016-07 should just show 2 activities, while it shows 5.
var data =
[{ "Category": "2016-07", "Serie": "Physiotherapy", "Value": 35.00 },
{ "Category": "2016-07", "Serie": "Flex Class", "Value": 28.00 },
{ "Category": "2016-08", "Serie": "Flex Class", "Value": 27.00 },
{ "Category": "2016-08", "Serie": "Manual Therapy", "Value": 48.00 }
// rest in plunker
];
Ok, I got it. In order for this to show properly, all combinations of Category-Serie need to be served in dataSource and filled with zeros where the Serie is missing e.g. like that that
{ "Category": "2016-07", "Serie": "Manual Therapy", "Value": 0 }
I'm trying to set the color of each individual bar to a different color in a multi series highCharts graphs.
here is the data as it comes in:
{
"yAxisText": "",
"yAxisUnit": "%",
"statusCode": "OK",
"chartType": "column",
"categories": [
"Basic",
"1",
"2",
"3+",
"4+"
],
"options": [
{
"name": "test1",
"data": [
56.6,
17.3,
8.6,
17.5,
12
]
},
{
"name": "test2",
"data": [
46.5,
16,
15.4,
22.1,
33
]
}
]
}
I'm able to make each data set a different color or each category a different color, but I can't figure out how to make each individual bar a different color.
So essentially for this data there would be 8 bars with 8 different colors. Thanks in advance!
You can set array of colors and then apply each color per poiny by colorByPoint option.
{
colors:['blue','red','green']
},
series:[{
colorByPoint: true,
data:[1,2,3]
}]
I am currently in the process of creating a bubble chart using AmCharts. For the most part the process is quite easy.
I however the bubbles AmCharts create seem to be very weirdly scaled in proportion to each other. If I e.g. have two bullets with value "9" and "3", no matter what I do the graph will set the bullet with value "9" to be as large as allowed by maxBulletSize (this can be wider than a column which is also just weird) and the other as small as possible.
What I would like is to have the values fall in the range from 1 to 10, where 10 should fill out approx. a column (it should however never be bigger than a column as it can then overlap with other bubbles). Thus even though I may not actually have a bullet of size "1", size "3" should remain the same.
Is this possible?
Normally, this is not possible using just configuration options. However, you can apply this simple workaround: just add two invisible bullets: one with value 1 and the other 10. It will ensure that the scale will always be the same for any in-between values.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 3
}, {
"y": 5,
"x": 3,
"value": 6
}, {
"y": 10,
"x": 8,
"value": 4
}, {
"y": 0,
"x": 0,
"value": 1,
"alpha": 0
}, {
"y": 0,
"x": 0,
"value": 10,
"alpha": 0
} ],
"graphs": [ {
"balloonText": "[[value]]",
"balloonFunction": function(item) {
// using this in order not to display balloons for
// hidden bullets
if (item.alpha === 0)
return "";
return "" + item.dataContext.value;
},
"bullet": "circle",
"lineAlpha": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"alphaField": "alpha",
"minBulletSize": 10,
"maxBulletSize": 100
} ]
} );
#chartdiv {
width: 100%;
height: 300px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv"></div>