I have created a component for using BarChart and LineChart. When I am hovering on the data points in the said graph, the console is getting filled with errors mentioned below.
Versions Used
"highcharts": "^10.2.0", "highcharts-react-official": "^2.1.3", "react": "^16.8.6",
Sample Image of the Chart
highcharts.src.js:24745 Uncaught TypeError: m.call is not a function
at k.refresh (highcharts.src.js:24745:1)
at g.<anonymous> (highcharts.src.js:28123:1)
at x (highcharts.src.js:1660:1)
at g.firePointEvent (highcharts.src.js:25813:1)
at f.runPointActions (highcharts.src.js:28121:1)
at f.onContainerMouseMove (highcharts.src.js:27678:1)
highcharts.src.js:24745 Uncaught TypeError: m.call is not a function
at k.refresh (highcharts.src.js:24745:1)
at g.<anonymous> (highcharts.src.js:28123:1)
at x (highcharts.src.js:1660:1)
at g.firePointEvent (highcharts.src.js:25813:1)
at f.runPointActions (highcharts.src.js:28121:1)
at g.onMouseOver (highcharts.src.js:26371:1)
at SVGGElement.e (highcharts.src.js:43249:1)
Chart Options
{
"chart": {
"zoomType": "xy",
"spacingTop": 50,
"style": {
"fontFamily": "Work Sans, sans-serif"
},
"alignTicks": true
},
"colors": [
"#4a8cb2",
"#506A78",
"#bbbbbb"
],
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"title": {},
"margin": 25,
"style": {
"top": 10
},
"categories": [
"Country: other",
"USA",
"Malaysia",
"India",
"United Kingdom",
"Switzerland",
"South Africa",
"Singapore",
"New Zealand",
"Scotland",
"China"
]
},
"tooltip": {
"formatter": {}
},
"yAxis": [
{
"title": {
"text": "ABC"
},
"plotLines": [
{
"color": "#D5D5D5",
"opacity": 0.5,
"dashStyle": "Dash",
"width": 2,
"org_score": 10,
"value": 63,
"label": {
"align": "right",
"style": {
"fontWeight": "bold"
},
"text": "Org Moment Score: 63"
},
"zIndex": 2
}
],
"min": null,
"max": null,
"allowDecimals": false,
"showFirstLabel": true,
"showLastLabel": true,
"labels": {},
"opposite": true
},
{
"title": {
"text": "ABC"
},
"allowDecimals": false,
"gridLineWidth": 0
}
],
"plotOptions": {
"column": {
"stacking": "normal",
"pointWidth": 20,
"states": {
"hover": {
"brightness": -0.3
}
},
"dataLabels": {}
},
"series": {
"pointWidth": 15,
"marker": {
"fillColor": "#FFFFFF",
"lineWidth": 2,
"lineColor": null
},
"dataLabels": {}
}
},
"series": [
{
"name": "Lorem Ipsum",
"type": "column",
"yAxis": 1,
"data": [
1,
73,
20,
24,
49,
6,
9,
14,
1,
1,
1
]
},
{
"name": "Ipsum Lorem",
"type": "line",
"color": "#ffdc4c",
"data": [
47,
62,
63,
63,
63,
63,
65,
65,
81,
81,
84
]
}
],
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"margin": 10
},
"exporting": {
"chartOptions": {
"title": {
"text": "'Lorem Ipsum Lorem Ipsum"
}
},
"enabled": true,
"allowHTML": true,
"sourceWidth": 1200,
"sourceHeight": 400,
"csv": {},
"menuItemDefinitions": {
"label": {
"text": "Show-Hide Data Labels"
}
},
"buttons": {
"contextButton": {
"align": "right",
"y": -45,
"x": -5,
"menuItems": [
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"separator",
"label"
]
}
}
},
"page": "Ipsum Lorem Ipsum"
}
Usage:
<HighchartsReact
highcharts={Highcharts}
options={chart_options}
allowChartUpdate={true}
ref={chart_ref}/>
Props Passed:
highcharts: Highcharts from highcharts/highstock
ref: React.createRef() passed
I have tried searching for the solution to this issue, but all I have gotten so far is that there are some issues related to tooltips. I can't pinpoint the issue, any help would be appreciated.
https://www.highcharts.com/forum/viewtopic.php?t=42956
The issue is caused by the following code:
tooltip: {
formatter: {}
}
In fact, tooltip.formatter is a callback function, so should be put this way:
tooltip: {
formatter: function() {}
}
or omitted if you don't want to format the tooltip.
Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-0syyvk
API:
https://api.highcharts.com/highcharts/tooltip.formatter
Related
I've got the following retool javascript code representing my Plotly data object. It however is producing the bar plot as expected but it is not producing any x-axis labels. I would have thought the string I am doing the groupings (the groupby column is a string) over would be under each column but no luck (just integer increments).
Is there a way to get the list of groups as it is plotted? I can then set that as the "xticks" argument. I tried setting the "type":"categorical" but no dice.
[
{
"name": "foobar",
"y": y_column,
"text": text_column,
"type": "bar",
"transforms": [
{
"type": "groupby",
"groups": group_column,
"styles": []
},
{
"type": "aggregate",
"groups": aggregate_group_column,
"aggregations": [
{
"target": target_variable,
"func": "avg",
"enabled": true
}
]
}
]
}
]
The layout is as follows
{
"title": {
"text": "<br>",
"font": {
"color": "#3D3D3D",
"size": 16
}
},
"font": {
"family": "Inter",
"color": "#979797"
},
"showlegend": true,
"legend": {
"xanchor": "center",
"x": 1,
"y": 1.0,
"orientation": "r"
},
"margin": {
"l": 72,
"r": 24,
"t": 80,
"b": 72,
"pad": 2
},
"hovermode": "closest",
"hoverlabel": {
"bgcolor": "#000",
"bordercolor": "#000",
"font": {
"color": "#fff",
"family": "Inter",
"size": 20
}
},
"clickmode": "select+event",
"dragmode": "select",
"xaxis": {
"title": {
"text":'X-Axis',
"standoff": 15,
"font": {
"size": 20
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"gridcolor": "#fff",
"zerolinecolor": "#fff",
"tickmode":'array'
},
"yaxis": {
"title": {
"text": variable_name,
"standoff": 6,
"font": {
"size": 20
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"zerolinecolor": "#DEDEDE"
}
}
The issue is that the individual sliver radius' of this variable pie chart are not consistent with the the percentage labels (i.e. 25%, 50%, 75%, and 100%). The radius' all seem to be correctly calculated, but visually I cannot seem to figure out how to get them to match correctly with the label rings. It feels like some small config property that's padding the label rings incorrectly, or maybe I just have a fundamental misunderstanding of calculating these z values. I've been spinning my wheels on this for a while now, and any help would be amazing!
Also, I currently do not have enough SO street cred to post a photo of the chart, but I will try to quickly get 10 karma in order to post it.
Edit: Yay, I did it! I have street cred now.
A good example of the current problem would be to look at the largest orange sliver in the top-center/right. That sliver is associated with the "Intellectual Engagement" item in the legend that correctly shows it's z value as 85. The problem is that 85 shouldn't extend all the way up to the 100% radius label.
Highcharts.chart('container', {
"chart": {
"type": "variablepie",
"margin": [
0,
200,
20,
0
]
},
"title": {
"text": null
},
"tooltip": {
"enabled": true
},
"legend": {
"align": "right",
"verticalAlign": "middle",
"layout": "vertical",
"rtl": true,
"labelFormat": "{name} <span style=\"opacity: 0.4;\">({z})</span>",
"itemStyle": {
"fontSize": "11px"
}
},
"plotOptions": {
"series": {
"innerSize": 0,
"stacking": "normal",
"showInLegend": true,
"point": {
"events": {}
}
}
},
"series": [
{
"minPointSize": 40,
"innerSize": 0,
"sizeBy": "radius",
"name": "Subdomain score",
"dataLabels": {
"enabled": false
},
"tooltip": {
"headerFormat": "<span style=\"color:{point.color}\">●</span><span style=\"font-size: 12px;font-weight:bold;\"> {point.key}</span><br/>",
"pointFormat": "<br/>Score: {point.z}<br/>",
"valueDecimals": 2
},
"data": [
{
"name": "Learning Strategies",
"y": 12,
"z": 48.6
},
{
"name": "Intellectual Engagement",
"y": 12,
"z": 85
},
{
"name": "Effort Control",
"y": 12,
"z": 56.6
},
{
"name": "Attention",
"y": 12,
"z": 60
},
{
"name": "Autonomy",
"y": 12,
"z": 66.6
},
{
"name": "Social Cognition",
"y": 12,
"z": 46.6
},
{
"name": "Current Emotional Health",
"y": 12,
"z": 52
},
{
"name": "Self Compassion",
"y": 12,
"z": 68.6
},
{
"name": "Stress Resilience",
"y": 12,
"z": 56
},
{
"name": "Gratitude Positivity",
"y": 12,
"z": 60
},
{
"name": "Mindset",
"y": 12,
"z": 70
},
{
"name": "Social Engagement",
"y": 12,
"z": 45
},
{
"name": "Nutrition Knowledge",
"y": 10.285714285714286,
"z": 52
},
{
"name": "Nutrition",
"y": 10.285714285714286,
"z": 66.6
},
{
"name": "Activity Level",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Aerobic Activity",
"y": 10.285714285714286,
"z": 53.4
},
{
"name": "Strength Training",
"y": 10.285714285714286,
"z": 70
},
{
"name": "Self Image",
"y": 10.285714285714286,
"z": 65
},
{
"name": "Sleep Habits",
"y": 10.285714285714286,
"z": 56
},
{
"name": "Long Term",
"y": 14.4,
"z": 57.2
},
{
"name": "Short Term",
"y": 14.4,
"z": 48.6
},
{
"name": "Reduce Sadness",
"y": 14.4,
"z": 51.4
},
{
"name": "Increase Happiness",
"y": 14.4,
"z": 60
},
{
"name": "Non Pecuniary",
"y": 14.4,
"z": 70
},
{
"name": "Connection",
"y": 14.4,
"z": 68
},
{
"name": "Compassion Empathy",
"y": 14.4,
"z": 76
},
{
"name": "Forgiveness",
"y": 14.4,
"z": 76
},
{
"name": "Purpose",
"y": 14.4,
"z": 58.2
},
{
"name": "Presence",
"y": 14.4,
"z": 72
}
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "100%",
"minPointSize": 0,
"borderSize": 1,
"borderColor": "#000",
"dataLabels": {
"enabled": true,
"format": "100%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 0
}
],
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "75%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "75%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 75
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "50%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "50%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 50
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
},
{
"showInLegend": false,
"type": "variablepie",
"size": "100%",
"innerSize": "25%",
"minPointSize": 0,
"dataLabels": {
"enabled": true,
"format": "25%",
"connectorPadding": 0,
"connectorWidth": 0,
"distance": -3
},
"enableMouseTracking": false,
"data": [
{
"y": 100,
"z": 25
}
],
"borderSize": 1,
"borderColor": "#000",
"colors": [
"rgba(0,0,0,0)"
]
}
],
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"chart": {
"margin": [
0,
0,
300,
0
],
"height": 600
},
"legend": {
"align": "center",
"verticalAlign": "bottom",
"layout": "horizontal"
}
},
"_id": "highcharts-3oqxpuf-36"
}
]
},
"colors": [
"#ff5a00",
"#ff6a00",
"#ff7e00",
"#ff9400",
"#ffb100",
"#ffd200",
"#00396f",
"#004980",
"#005f92",
"#007aa9",
"#009cc1",
"#08c6de",
"#a11500",
"#b51800",
"#c01a00",
"#cb1c00",
"#d72100",
"#e43304",
"#f26b3e",
"#006e00",
"#008200",
"#009906",
"#1cb423",
"#68d566",
"#071d9c",
"#1224ac",
"#2733be",
"#4d52d1",
"#8e8ee7"
]
});
#container {
min-width: 300px;
max-width: 800px;
height: 500px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<div id="container"></div>
The series don't have the same scale. Value 75 is the highest one and it is treated as 100%. Add the below properties to achieve the wanted result.
series: [{
minPointSize: 0,
zMax: 100,
...
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/dcaqrgot/
API Refernece:
https://api.highcharts.com/highcharts/series.variablepie.minPointSize
https://api.highcharts.com/highcharts/series.variablepie.zMax
I tried to create chart with some values on axis are being listed as expected considering data that is provided ( marked with red )
but what confuses me is when i provide negative values ( same values just added - )
it just shows 0 on axis
is there possibility to create same behavior as I have on positive values when they are provided ni data, so it does not glitch when values are provided ?
$(function() {
var chart = new Highcharts.Chart(
{
"meta": {
"drilldownEnabled": false
},
"chart": {
renderTo:"container",
"additionalData": {
"dateTime": false,
"datetype": "string",
"cliccable": true,
"drillable": false,
"drillableChart": false,
"isCockpit": true,
"categoryColumn": "product_name",
"categoryGroupBy": "",
"categoryGroupByNamens": "",
"categoryName": "product_name",
"categoryOrderColumn": "",
"categoryOrderType": "",
"categoryStacked": "",
"categoryStackedType": ""
},
"zoomType": "xy",
"panning": true,
"type": "column",
"options3d": {
"enabled": false,
"alpha": 25,
"beta": 15,
"depth": 50,
"viewDistance": 25
},
"backgroundColor": "#FFFFFF",
"heightDimType": "pixels",
"widthDimType": "pixels",
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"borderColor": "#FFFFFF",
"style": {
"backgroundColor": "#FFFFFF",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
},
"events": {}
},
"colors": [
"#7cb5ec",
"#434348",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
],
"title": {
"text": "",
"style": {
"align": "",
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
}
},
"legend": {
"itemDistance": 0,
"symbolPadding": 25,
"enabled": false
},
"xAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"type": "category",
"id": 0,
"title": {
"customTitle": false,
"text": "product_name",
"style": {}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
}
}
],
"yAxis": [
{
"plotBands": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"from": 0,
"to": 0
}
],
"plotLines": [
{
"label": {
"text": "",
"align": "center"
},
"color": "",
"dashStyle": "",
"value": 0,
"width": 0
}
],
"min": 0,
"title": {
"text": "store_sales",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
},
"labels": {
"style": {
"color": "",
"fontFamily": "",
"fontSize": "",
"fontWeight": ""
},
"align": ""
},
"gridLineDashStyle": "$convertedTypeline",
"minorGridLineDashStyle": "$convertedMinorTpeline"
}
],
"series": [
{
"name": "store_sales",
"dataLabels": {
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": "",
"fontStyle": ""
},
"enabled": true,
"labelFormat": "{y:,.2f}"
},
"data": [
{
"drilldown": false,
"y": -6.36,
"name": "ADJ Rosy Sunglasses",
"datetype": "string"
},
{
"drilldown": false,
"y": -9.55,
"name": "Akron City Map",
"datetype": "string"
},
{
"drilldown": false,
"y": -12.55,
"name": "American Beef Bologna",
"datetype": "string"
},
{
"drilldown": false,
"y": -7.35,
"name": "American Chicken Hot Dogs",
"datetype": "string"
},
{
"drilldown": false,
"y": -12.19,
"name": "American Cole Slaw",
"datetype": "string"
},
{
"drilldown": false,
"y": -6.68,
"name": "American Corned Beef",
"datetype": "string"
},
{
"drilldown": false,
"y": -8.57,
"name": "American Foot-Long Hot Dogs",
"datetype": "string"
},
{
"drilldown": false,
"y": -6,
"name": "American Low Fat Bologna",
"datetype": "string"
},
{
"drilldown": false,
"y": -7.94,
"name": "American Low Fat Cole Slaw",
"datetype": "string"
},
{
"drilldown": false,
"y": -6.49,
"name": "American Pimento Loaf",
"datetype": "string"
}
],
"selected": true,
"tooltip": {
"valueDecimals": 2,
"scaleFactor": "empty",
"ttBackColor": "#FCFFC5"
},
"yAxis": 0
}
],
"tooltip": {
"borderWidth": 0,
"borderRadius": 0,
"followTouchMove": false,
"followPointer": true,
"useHTML": true,
"backgroundColor": null,
"style": {
"padding": 0
}
},
"lang": {
"noData": ""
},
"noData": {
"style": {
"fontFamily": "",
"fontSize": "",
"color": ""
},
"position": {
"align": "center",
"verticalAlign": "middle"
}
},
"credits": {
"enabled": false
},
"plotOptions": {
"line": {
"marker": {
"symbol": "circle",
"lineWidth": 2
}
},
"series": {
"events": {},
"showCheckbox": true,
"cursor": "pointer",
"point": {
"events": {}
},
"dataLabels": {
"allowOverlap": true
},
"turboThreshold": 2000
}
}
}
);
});
here is a snippet of negative ( with glitch )
http://jsfiddle.net/JeLrb/532
here is a same snippet just with positive (how axis values should be displayed)
http://jsfiddle.net/JeLrb/533/
Anyone know solution for this ?
Thank you !
Remove the yAxis: "min:0" and it will create negative yAxis DataLabels for you.
Please check
"yAxis": [
{
/*"min": 0, remove this */
"title": {
"text": "store_sales",
"customTitle": false,
"style": {
"color": "",
"fontFamily": "",
"fontWeight": "",
"fontSize": ""
}
}
}
]
http://jsfiddle.net/98b0dkLj
If you change "yAxis": "min": from 0 to something like -20 it will work.
Is it possible to stack data hourly ? I have only two columns: time and signal from trigger "trig = 1". So I need to stack all trigger signals on each hour. So on Y axis should be a number sum of all trigger signals in each hour. You can use this example JSFiddle.
Data looks like this:
[{"time":"15:15:00","trig":"1"},{"time":"15:45:00","trig":"1"},
{"time":"16:10:18","trig":"1"},{"time":"16:20:00","trig":"1"},
{"time":"17:30:00","trig":"1"},{"time":"17:50:00","trig":"1"},
{"time":"18:25:00","trig":"1"},{"time":"18:45:00","trig":"1"},
{"time":"19:05:00","trig":"1"},{"time":"19:40:00","trig":"1"},
{"time":"21:15:00","trig":"1"},{"time":"21:50:00","trig":"1"}]
And my JS:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [{
"title": "triger",
"fieldMappings": [{
"fromField": "time",
"toField": "time"
}, {
"fromField": "trig",
"toField": "trig"
}],
"compared": false,
"categoryField": "time",
"dataLoader": {
"url": "values4.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"pathToImages": "images/",
"dataDateFormat": "JJ:NN:SS",
"categoryAxis": {
"parseDates": true
},
"panels": [{
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "trig",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
}]
}],
"periodSelector": {
"position": "top",
"dateFormat": "JJ:NN",
"inputFieldWidth": 150,
"periods": [ {
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["5ss"]
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periods": [{
"period": "HH",
"count": 1,
"label": "1 hour"
}, {
"period": "HH",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"selected": true,
"label": "MAX"
}]
},
});
How can I display a bar chart with multiple series:
http://jsfiddle.net/qyd6w5tx/1/
$(function () {
$('#container').highcharts(
{
"chart": {
"style": {
"fontFamily": "Arial, sans-serif"
},
"alignTicks": false,
"marginRight": 20,
"height": 334
},
"tooltip": {
"pointFormat": "<span style=\"color:{series.color}\">●</span> <span style=\"{series.options.style.pct}\">({point.percentage:,.2f}%)</span> <b style=\"{series.options.style.abs}\">{point.value:,.2f}</b><br/>"
},
"xAxis": {
"type": "category",
"reversed": false,
"labels": {}
},
"yAxis": [{
"title": {
"text": null
},
"index": 0
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"index": 1,
"min": -0.39,
"max": 9.99
}, {
"title": {
"text": null
},
"labels": {
"format": "{value}%"
},
"opposite": true,
"index": 2
}],
"legend": {
"borderWidth": 0,
"enabled": false
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
"style": {
"textShadow": "none"
},
"allowOverlap": true
},
"minPointLength": 2
},
},
"credits": {
"enabled": false
},
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}],
"title": {
"text": "Test"
}
}
);
});
In this example I would like to display one after the other:
Test 01
Test 02
Test 03
Test 04
Test 05
Test 06
Test 07
And then have the Group A in blue and the Group B in red, and display a legend under the chart with:
- Group A (in blue)
- Group B (in red)
I am bit confused with how to make this with highchart...
Edit:
Thanks to Rotan075 to understand my problem and to find a solution. http://jsfiddle.net/hw5s4ahm/
Actually I didn't specify that need to keep the same data structure for the series:
"series": [{
"name": "Group A",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 01",
"value": 0.8,
"percentage": 0.8,
"y": 0.8
}, {
"name": "Test 02",
"value": 2,
"percentage": 2,
"y": 2
}, {
"name": "Test 03",
"value": -0.5,
"percentage": -0.5,
"y": -0.5
}, {
"name": "Test 04",
"value": 2.33,
"percentage": 2.33,
"y": 2.33
}],
"yAxis": 1
}, {
"name": "Group B",
"type": "bar",
"format": "pct",
"top_value": "",
"min_percent": "",
"style": {
"abs": "display: none"
},
"data": [{
"name": "Test 05",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 06",
"value": 9,
"percentage": 9,
"y": 9
}, {
"name": "Test 07",
"value": 3,
"percentage": 3,
"y": 3
}],
"yAxis": 1
}]
The rest can change, but this data is generated by a third part level and has to stay generic. I thought it would be just a question of settings but it seem to be much more complicated.
For what I understood out of your code is that you have data for Group A and group B right? What you have to do is make two data list with each of the same length. If there is no data for the specific group you have to add a null value to it. Otherwise Highcharts combines the group A and group B for every Test x.
What you need is this code (live on JSFiddle):
$(function () {
$('#container').highcharts(
{
chart: {
type: 'column',
inverted: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter:function() {
if(this.y > 0){
return this.y;
return this.point.y;
}
}
}
}
},
yAxis: {
allowDecimals: false,
min: -1,
labels: {
formatter: function () {
return this.value + '%';
}
},
title: {
text: ' ',
margin:40
}
},
xAxis: {
categories: ['Test1', 'Test2', 'Test3', 'Test4', 'Test5','Test6','Test7']
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'middle',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1,
y:10,
x:350
},
series: [{
name: 'GroupA',
color: 'rgba(223, 83, 83, .5)',
data: [{y:null},{y:null}, {y:null}, {y:null}, {y:2.9}, {y:0.5}, {y:1.5}]
},{
name: 'GroupB',
color: 'rgba(119, 152, 191, .5)',
data: [{y:6.5}, {y:3.9}, {y:8.5}, {y:6.6},{y:null},{y:null},{y:null}]
}],
title: {
text: "Test"
}
}
);
});
P.S. For aligning the Legend on the bottom of your graph I did that in a quite hackish way. I use as title text just blank space and place the legend above it. You can modify it in whatever you want.
Most of what you are asking for should be handled by the default behavior of highcharts.
-You can specify the color for each series within the series options:
series: [{
name: 'Group A',
color: 'rgba(0,156,255,0.9)',
data: [...]
},{
name: 'Group B',
color: 'rgba(204,0,0,0.9)',
data: randomData(7)
}]
-You can set your x axis labels via the categories option:
xAxis: {
categories: ['Test 01','Test 02','Test 03','Test 04','Test 05','Test 06','Test 07']
}
-The chart will group them by default
-The legend will be aligned below the chart by default (no hacks required)
Example in action:
http://jsfiddle.net/jlbriggs/3d3fuhbb/57/
Updated example using your data:
http://jsfiddle.net/jlbriggs/3d3fuhbb/58/
Adds a min and max value to the x axis to always show each category