Related
Plot bands in highchart export server is not working properly. I want the output same as shown in jsfiddle below.
I want the color plot band to show on y axis with width 20.
This is expected output: https://jsfiddle.net/vc6r8y3n/
Attached image is actual output when we use high-chart export server.
but when I tried same JavaScript json object on
http://export.highcharts.com/
its giving me image with plot band color spread on whole chart. its not considering width for 'y' or 'x' axis in export server. I gave attached image of export chart.
Why highchart behaving differently in both the cases.
Highchart JSON is same as in JSfiddle.
Actual image.
Expected is what it display in Jsfiddle. https://jsfiddle.net/vc6r8y3n/
{
"chart": {
"height": 350,
"width": 600,
"style": {
"fontFamily": "\"Arial\", sans-serif",
"fontSize": "16px"
},
"backgroundColor": "transparent"
},
"title": {
"text": null
},
"credits": {
"enabled": false
},
"legend": {
"align": "center",
"layout": "horizontal",
"verticalAlign": "bottom",
"symbolHeight": 5,
"symbolWidth": 5,
"symbolRadius": 0,
"itemDistance": 10,
"itemStyle": {
"fontSize": "5px",
"fontWeight": "bold",
"fontFamily": "\"Arial\", sans-serif"
},
"borderWidth": 0,
"padding": 0,
"margin": 5
},
"xAxis": {
"categories": [
"Sep-2020",
"Oct-2020",
"Nov-2020",
"Dec-2020",
"Jan-2021",
"Feb-2021"
],
"labels": {
"style": {
"fontSize": "4px",
"fontFamily": "\"Arial\", sans-serif",
"color": "#000"
},
"y": 5
},
"gridLineColor": "transparent",
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"lineColor": "#9A9A9A",
"zIndex": 9999999
},
"yAxis": [
{
"title": {
"text": ""
},
"min": 0,
"max": 100,
"tickInterval": 20,
"plotBands": [
{
"color": "rgb(204,0,0)",
"from": 0,
"to": 30.99,
"zIndex": 3
},
{
"color": "rgb(226,113,113)",
"from": 31,
"to": 44.99,
"zIndex": 3
},
{
"color": "rgb(247,209,34)",
"from": 45,
"to": 54.99,
"zIndex": 3
},
{
"color": "rgb(136,207,136)",
"from": 55,
"to": 68.99,
"zIndex": 3
},
{
"color": "rgb(68,180,68)",
"from": 69,
"to": 87.99,
"zIndex": 3
},
{
"color": "rgb(0,153,0)",
"from": 88,
"to": 100,
"zIndex": 3
}
],
"width": 20
}
],
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true
}
}
},
"series": [
{
"name": "Line1",
"type": "column",
"data": [
{
"y": 61,
"color": "#5b9bd5"
},
{
"y": 41,
"color": "#5b9bd5"
},
{
"y": 21,
"color": "#5b9bd5"
},
{
"y": 81,
"color": "#5b9bd5"
},
{
"y": 31,
"color": "#5b9bd5"
},
{
"y": 71,
"color": "#5b9bd5"
}
],
"color": "#5b9bd5",
"showInLegend": true
},
{
"name": "Line 2",
"type": "column",
"data": [
null,
null,
null,
null,
null,
1
],
"color": "#00B050"
},
{
"name": "Line 3",
"type": "spline",
"data": [
null,
{
"y": 45
},
{
"y": 38
},
{
"y": 32
},
{
"y": 40
},
{
"y": 48
}
],
"color": "#9A0229"
}
]
}
enter image description here
We're using minPointLength property to make points with a value of 0 show up in a stacked column chart. The problem is that now a point with a value of 4 (third column from left in screenshot) is displayed smaller than the minimum height. In the following screenshot the very tiny block with value 4 is hovered and the blocks with 0 are displayed in red.
I expected that blocks with a value bigger than 0 are also bigger than the blocks with a value of 0 or at least same height.
Our overall target is to set a minimum height for all blocks, in a way that all the box labels can be shown.
Here is a fiddle to play around: https://jsfiddle.net/ftmkxdbo/
This is the configuration of our chart:
Highcharts.chart('container', {
"chart": {
"type": "column"
},
"title": {
"text": ""
},
"credits": {
"enabled": false
},
"xAxis": {
"categories": ["10/17", "10/18", "10/19", "10/20"]
},
"yAxis": {
"title": {
"text": ""
},
"stackLabels": {
"enabled": true,
"style": {
"color": "gray"
}
},
"min": 0,
},
"legend": {
"enabled": false
},
"plotOptions": {
"column": {
"stacking": "normal",
"dataLabels": {
"enabled": true,
"style": {
"fontSize": "10px",
"fontWeight": "normal",
"textShadow": "0px"
},
},
"minPointLength": 5,
}
},
"series": [{
"name": "3",
"data": [{
"x": 0,
"y": 3,
}],
"index": 0,
"color": "rgba(120,185,40,0.8)"
}, {
"name": "12",
"data": [{
"x": 0,
"y": 12,
}],
"index": 1,
"color": "rgba(245,155,0,0.8)"
}, {
"name": "19",
"data": [{
"x": 0,
"y": 19,
}],
"index": 2,
"color": "rgba(120,185,40,0.8)"
}, {
"name": "13",
"data": [{
"x": 0,
"y": 13,
}],
"index": 3,
"color": "rgba(120,185,40,0.8)"
}, {
"name": "18",
"data": [{
"x": 1,
"y": 18,
}],
"index": 0,
"color": "rgba(120,185,40,0.8)"
},
// ...
]
});
That is a very problematic issue. Currently the columns overlap because the stacking functionality does not take into account the minPointLength option. If it were otherwise, the total value of the column would be incorrect.
You can see all discussion about this problem on github: https://github.com/highcharts/highcharts/issues/1776
There are three data series, two of them are bar type series (Insolation Duration and Power Duration).
When I import data (from Striped Table) to the Highcharts, the bar chart height doesn't display properly.
It doesn't fit the scale of the chart's value, like this:
e.g. 2018/05/01
The Insolation value is less than the Power value, but the height of Power Duration bar chart is higher than Insolation Duration.
Here are the chart options I use:
var ChartObj =
{
type: "chart",
value:
{
"chart": { "alignTicks": false, "zoomType": "xy" },
"title": { "text": " ", "floating": false, "align": "center" },
"xAxis":
[
{
"categories": [], //PUT LABEL IN HERE
"crosshair": true, "index": 0, "isX": true
}
],
"tooltip": { "shared": true },
"legend":
{
"layout": "horizontal",
"align": "right",
"x": 0,
"verticalAlign": "top",
"y": 0,
"floating": false,
"backgroundColor": "#FFFFFF"
},
"yAxis":
[
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#7cb5ec" },
"enabled": false
},
"title": { "text": null, "style": { "color": "#7cb5ec" } },
"opposite": false,
"index": 0,
},
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#90ed7d" },
"enabled": false
},
"title":
{
"text": null,
"style": { "color": "#90ed7d" }
},
"opposite": true,
"index": 1,
},
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#f7a35c" },
"enabled": false
},
"title": { "text": null,
"style": { "color": "#f7a35c" } },
"opposite": true,
"index": 2,
}
],
"series":
[
{
// Insolation
"name": " ",
"color": "#90ed7d",
"tooltip":
{
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</sup></b><br/>"
},
"yAxis": 0,
"type": "column",
"data": [],
"_symbolIndex": 0
},
{
// Power
"name": " ",
"color": "#f7a35c",
"tooltip":
{
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 1,
"type": "column",
"data": [],
"_symbolIndex": 1
},
{
// PR
"name": " ",
"color": "#7cb5ec",
"tooltip":
{
"valueSuffix": "",
"pointFormat": "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:,.2f}</b><br/>"
},
"yAxis": 2,
"type": "line",
"data": []
}
]
}
};
You will need to set a max to the 2 first column axis like this
{
"gridLineColor": "transparent",
"labels":
{
"format": "{value}",
"style": { "color": "#7cb5ec" },
"enabled": false
},
"title": { "text": null, "style": { "color": "#7cb5ec" } },
"opposite": false,
"index": 0,
max:12 // The value to set
},
Or change the index of your series to use the same yAxis
Demo Fiddle
Can someone tell me why this chart is rendering properly in drill up? The code is wrapping arc3d. I have provided the code and also the JFiddle for reference. When you click on the graph it drills down perfectly but while drilling up the graph is not rendering properly. it holds the color of the drilled slice.
(http://jsfiddle.net/subhasispatra/np0bn3ps/)
$(function () {
Highcharts.setOptions({
lang: {
drillUpText: '<Back'
}
});
Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'arc3d', function (proceed) {
var result = proceed.apply(this, [].slice.call(arguments, 1));
result.fadeIn = result.show;
return result;
});
$('#container').highcharts({
"plotOptions": {
"pie": {
"point": {
"events": {
"click": function () {
if (this.options != undefined && this.options != null && this.options.url != null && this.options.url.length > 0) location.href = this.options.url;
else return;
}
}
},
"dataLabels": {
"enabled": true,
"style": {
"fontWeight": "bold",
"fontFamily": "Arial",
"fontSize": "10"
},
"color": "#000000"
},
"shadow": true,
"curson": "pointer",
"depth": 30,
"allowPointSelection": true,
"showInLegend": true
}
},
"drilldown": {
"series": [{
"id": "Draft",
"data": [{
"name": "15-21 DAYS",
"url": "http://www.google.com",
"y": 1
}, {
"name": "22-30 DAYS",
"url": "http://www.google.com",
"y": 1
}]
}, {
"id": "Canceled",
"data": [{
"name": "15-21 DAYS",
"url": "http://www.google.com",
"y": 0
}, {
"name": "22-30 DAYS",
"url": "http://www.google.com",
"y": 1
}]
}],
"drillUpButton": {
"relativeTo": "spacingBox",
"theme": {
"style": {
"fontSize": "7pt"
}
},
"y": 0,
"x": 0
}
},
"series": [{
"name": "SERIES",
"data": [{
"drilldown": "Draft",
"name": "Draft",
"y": 2
}, {
"drilldown": "Canceled",
"name": "Canceled",
"y": 1
}]
}],
"yAxis": {
"title": {
"style": {
"color": "#000000",
"fontSize": "10"
}
},
"labels": {
"style": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
}
}
},
"title": {
"text": "Orders created in last 30 days"
},
"legend": {
"itemStyle": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
},
"layout": "vertical",
"align": "left",
"verticalAlign": "middle"
},
"chart": {
"renderTo": "container",
"options3d": {
"enabled": "true",
"alpha": 40,
"beta": 0,
"depth": 40
},
"backgroundColor": "rgba(255, 255, 255, 0.1)",
"type": "pie"
},
"credits": {
"enabled": false
},
"xAxis": {
"title": {
"style": {
"color": "#000000",
"fontSize": "10"
}
},
"labels": {
"style": {
"fontWeight": "normal",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "10"
}
}
}
});
});
The problem is due to 3D rendering. Disable 3D options and it'll work fine.
I'm trying to set a secondary axis with a min/max value, and the primary axis often overwrites the max on the secondary axis.
I know that I could use alignTicks:false, but I don't like the way that makes the ticks look. I also know that I can hide the ticks for one of the axes, but again, I don't like they it looks.
I would like to either force the right side to use min/max and figure out the proper tick intervals, or I'd like to force the left side to have a specific number of ticks.
I need some ideas, here's a jsfiddle with my code and some mock data.
http://jsfiddle.net/2s6kK/
$(function () {
$('#container').highcharts({
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"day": "%b %e"
}
},
"yAxis": [{
"min": 0,
"startOnTick": false,
"labels": {
"style": {
"color": "#4074C3"
}
},
"title": {
"text": "Revenue",
"style": {
"color": "#4074C3"
},
"margin": 5
},
"index": 0
}, {
"allowDecimals": false,
"min": 0,
"max": 100,
"maxPadding": 0.2,
"startOnTick": false,
"labels": {
"style": {
"color": "#8DAD36"
}
},
"title": {
"text": "Win Rate",
"style": {
"color": "#8DAD36"
},
"margin": 2
},
"opposite": true,
"index": 1,
// "alignTicks": false
}],
"legend": {
"enabled": true,
"align": "center",
"verticalAlign": "top",
"x": 0,
"y": -5,
"borderWidth": 0
},
"series": [{
"name": "Revenue",
"type": "line",
"yAxis": 0,
"data": [5.4,27,27,27,58,0, 0, 0, 0
],"pointStart":1377993600000,"pointInterval":86400000
}, {
"name": "Win Rate",
"type": "line",
"color": "#8DAD36",
"yAxis": 1,
"data": [60,48,48,48,48,60, 0, 0, 0, 0
],"pointStart":1377993600000,"pointInterval":86400000
}]
});
});
Thanks,
Josh
You could try setting your tickInterval to 10 in your y-axis definition:
"tickInterval": 10
http://jsfiddle.net/2s6kK/1/