Make minPointLenght apply to all blocks in stacked column chart - highcharts

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

Related

Highchart-export-server not showing plot band correctly on chart

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

highcharts strange area offset error when combined with xrange

I have a combined xrange and area chart, where I cannot get the area plot to go to the bottom of the chart view.
This is what I would like:
But this is what I'm getting:
Any help would be greatly appreciated.
https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/
Highcharts.chart('container', {
"chart": {
"borderWidth": 0,
"zoomType": "x",
"animation": false,
"scrollablePlotArea": { "scrollPositionX": 1 },
"height": 200,
"spacing": [0,0,0,0]
},
"scrollbar": { "enabled": true },
"time": { "useUTC": false },
"title": { "enabled": false },
"legend": { "enabled": false },
"colors": [ "#0032FF" ],
"credits": { "enabled": false },
"plotOptions": {
"area": { "threshold": null },
"xrange": { "minPointLength": 1 }
},
"xAxis": {
"type": "datetime",
"labels": { "overflow": "justify" },
"title": { "text": "Date" }
},
"yAxis": {
"lineWidth": 1,
"tickWidth": 1,
"alternateGridColor": "#F2F2F2",
"title": { "enabled": false },
"categories": [ "Closed", "Open" ],
"max": 1,
"min": -1
},
"tooltip": {
"borderRadius": 6,
"borderColor": "#0032FF",
"useHTML": true
},
"series": [
{
"name": "Proximity",
"type": "xrange",
"turboThreshold": 0,
"borderColor": "gray",
"animation": 0,
"pointWidth": 20,
"colors": [
"#0032FF",
"#0b5668"
],
"data": [
{ "x": 1567077909855, "x2": 1567083603287, "y": 1 },
{ "x": 1567077924011, "x2": 1567077924011, "y": 0 },
{ "x": 1567083619442, "x2": 1567083619442, "y": 1 }
]
},
{
//"turboThreshold": 1000,
"type": "area",
"color": "#f9d5d5",
"lineWidth": 0,
"animation": 0,
"data": [
{ "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
{ "x": 1566728240265, "y": 2, "name": "Loss" },
{ "x": 1567077909855, "y": 2, "name": "Gain" },
{ "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
{ "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
{ "x": 1567085295420, "y": 2, "name": "Loss" },
{ "x": 1567085533152, "y": 2, "name": "Gain" },
{ "x": 1567085533152, "y": 0, "name": "Gained connectivity" }
]
}
]
});
Instead of area series type use xAxis.plotBands:
xAxis: {
type: 'datetime',
plotBands: [{
from: 1567079711855,
to: 1567077909855,
color: '#f9d5d5'
}, {
from: 1567082015102,
to: 1567079910825,
color: '#f9d5d5'
}]
}
Demo:
https://jsfiddle.net/BlackLabel/y706czmo
API reference:
https://api.highcharts.com/highcharts/xAxis.plotBands

Render line chart across the plotting area

Highcharts line chart, how to render across plot area.
Trying to render the line chart using HighCharts library to span across the entire plotting area. Using xAxis.min was able to make sure the start is from 0 on xAxis, however, not able to figure out how to make it end where chart plot area ends.
$(function() {
$('#container').highcharts({
"chart": {
"margin": null,
"stacking": "normal",
"height": "250px",
"animation": false,
"events": {}
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"inside": true,
"align": "right",
"format": "",
"style": {}
},
"inside": true
}
},
"title": {
"text": null
},
"subtitle": {
"text": null
},
"xAxis": {
"title": {
"text": null,
"align": "high",
"rotation": 0,
"style": {},
"y": null,
"x": null
},
"plotLines": [],
"categories": [
"2019-06-10",
"2019-06-17"
],
"tickInterval": 1,
"tickPositions": [
1
],
"labels": {
"style": {},
"useHTML": true,
"align": ""
},
min: 0.5
},
"legend": {
"enabled": true,
"layout": "horizontal",
"align": "center",
"verticalAlign": "bottom",
"floating": false,
"x": 0,
"y": 0,
"symbolPadding": null,
"symbolRadius": null,
"itemStyle": {},
"itemDistance": null
},
"yAxis": [{
"title": {
"text": "",
"align": "high",
"rotation": 0,
"style": {}
},
"labels": {
"format": "{value}",
"style": {}
},
"opposite": false,
"yAxis": 0,
"lineWidth": 1,
"gridLineColor": "#e6e6e6",
"gridLineWidth": 1,
"gridLineDashStyle": "solid",
"index": 0
}],
"tooltip": {
"enabled": true,
"followPointer": false,
"shared": false
},
"credits": {
"enabled": false
},
"series": [{
"type": "line",
"name": null,
"fillOpacity": 0,
"color": "#0077bc",
"fillColor": "#0077bc",
"opposite": false,
"yAxis": 0,
"legendIndex": 1,
"marker": {
"enabled": true
},
"dashStyle": "Solid",
"data": [{
"y": 396,
"toolTipData": "<div>Times on Air : 396</div><br/>"
},
{
"y": 468,
"toolTipData": "<div>Times on Air : 468</div><br/>"
}
],
"_symbolIndex": 0
}]
});
});
https://jsfiddle.net/fzg0evns/
Instead of using dates as x-axis categories you can add a date to point x property and define x-axis type = "datetime". Check the demo posted below.
Code:
"xAxis": {
"type": "datetime",
...
},
"series": [{
...
"data": [{
"y": 396,
"x": new Date('2019-06-10').getTime(),
"toolTipData": "<div>Times on Air : 396</div><br/>"
},
{
"y": 468,
"x": new Date('2019-06-17').getTime(),
"toolTipData": "<div>Times on Air : 468</div><br/>"
}
]
}]
Demos:
With categories, tickInterval, and tickPositions.
Without them.
API reference:
xAxis.type
https://api.highcharts.com/highcharts/series.line.data.x

Export option not visible in Highcharts

When I generate my Highchart chart it generates complete. The only thing that doesn't show up is the export option.
Can anybody figure out what I am doing wrong?
Do I need to specify extra CSS styling options of some sort or include another JS script to allow this to work? I can't really figure it out at the moment.
chart1 = new Highcharts.Chart({
"chart": {
"renderTo": "container",
"type": "column"
},
"title": {
"text": "Doorlooptijd exploten"
},
"subtitle": {
"text": "Databron: Digibieb"
},
"xAxis": {
"categories": {
"2": "> xx",
"1": "< xx",
"0": "< xx"
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Aantallen"
}
},
"legend": {
"layout": "vertical",
"backgroundColor": "#FFFFFF",
"align": "left",
"verticalAlign": "top",
"x": 100,
"y": 100,
"floating": 0,
"shadow": 1
},
"exporting": {
"enabled": true
},
"credits": {
"enabled": false
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
}
},
"series": [{
"name": "asd",
"data": [1, 1, 1]
}, {
"name": "asd2",
"data": [1, 1, 1]
}, {
"name": "asd3",
"data": [1, 1, 1]
}, {
"name": "asd4",
"data": [0, 0, 25]
}, {
"name": "asd5",
"data": [54, 19, 53]
}, {
"name": "asd6",
"data": [0, 0, 4]
}, {
"name": "asd8",
"data": [22, 4, 28]
}, {
"name": "asd7",
"data": [23, 40, 19]
}, {
"name": "asd9",
"data": [23, 13, 8]
}, {
"name": "asd10",
"data": [3, 0, 0]
}]
});
You need to load the exporting.js script like this after the main Highcharts script
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Fiddle

How do I force highcharts to pay attention to min and max on my secondary axis?

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/

Resources