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
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
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
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
I've got a two-series Highcharts column chart that I'm trying to modify the color between past and future. I'd like the colors in past to be green, and colors in future to be blue essentially. I've read about highcharts "zones" which allow you to change attributes on the axis after a point, but the documentation uses a simple data chart, and not a datetime version like I'm using.
How can I use these zones with a datetime chart, or better-- how can I change the border/fill color of my bars for future instead of default colors used.
http://www.highcharts.com/docs/chart-concepts/series#zones
https://jsfiddle.net/x4n91jL8/
$(function () {
var colors = Highcharts.getOptions().colors;
colors[0] = 'rgba(255,255,255,0)';
colors[1] = '#7FC69E';
$('#container').highcharts({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "area",
"alignTicks": false,
"height": 300,
"marginLeft": 1,
"marginBottom": 1,
"backgroundColor": "transparent",
"events": {}
},
"title": {
"enabled": false,
"text": ""
},
"plotOptions": {
"series": {
"pointPadding": 0,
"groupPadding": 0.02,
"marker": {
"enabled": false
}
},
"column": {
"animation": false,
"grouping": false,
"pointPadding": 0,
"borderWidth": 0,
"allowPointSelect": false,
"events": {}
},
"line": {
"allowPointSelect": false,
"events": {}
},
"area": {
"allowPointSelect": false,
"events": {}
}
},
"legend": {
"enabled": false,
"layout": "horizontal",
"align": "center",
"verticalAlign": "top",
"floating": true,
"backgroundColor": "#FFFFFF"
},
"tooltip": {
"enabled": false,
"shared": true
},
"rangeSelector": {
"enabled": false,
"inputEnabled": true
},
"xAxis": {
"gridLineColor": "transparent",
"zIndex": 3,
"minorTickInterval": 604800000,
"minorTickPosition": "inside",
"minorTickLength": 5,
"minorTickWidth": 1,
"minorGridLineWidth": 0,
"startOnTick": false,
"gridLineWidth": 1,
"type": "datetime",
"min": 1451800000000,
"max": 1457000000000,
"labels": {
"enabled": false,
"step": 1
},
"dateTimeLabelFormats": {
"month": "%b",
"year": "%Y"
}
},
"series": [
{
"name": "Duration",
"zIndex": 3,
"type": "column",
"data": [
[
1452470400000,
6.5
],
[
1453075200000,
11.25
],
[
1453680000000,
8.25
],
[
1454284800000,
6.55
],
[
1454889600000,
1.05
],
[
1455494400000,
4.633333333333333
],
[
1456099200000,
1.1666666666666667
],
],
"tooltip": {
"yDecimals": 0
},
"borderWidth": 1,
"borderColor": "#008244",
"opacity": 0.6,
"lineWidth": 1,
"states": {
"hover": {
"lineWidth": 1
}
},
"zoneAxis": "x",
"zones": [
{
"value": 1454284800000
},
{
"borderColor": "#566888"
}
],
"_colorIndex": 0
},
{
"name": "Duration",
"zIndex": 3,
"type": "column",
"data": [
[
1454284800000,
5.216666666666667
],
[
1454889600000,
0
],
[
1455494400000,
2.6666666666666665
],
[
1456099200000,
1.1666666666666667
],
],
"tooltip": {
"yDecimals": 0
},
"borderWidth": 0,
"borderColor": "#008244",
"opacity": 0.6,
"lineWidth": 1,
"states": {
"hover": {
"lineWidth": 1
}
},
"zoneAxis": "x",
"zones": [
{
"value": 1454284800000
},
{
"fillColor": "#566888"
}
],
"_colorIndex": 1
}
],
"yAxis": [
{
"labels": {
"enabled": false
},
"opposite": false,
"gridLineWidth": 0,
"minorGridLineWidth": 0,
"showEmpty": false,
"title": {
"text": "",
"align": "middle",
"style": {
"color": "rgba(255,255,255,0)"
}
},
"lineWidth": 1,
"min": 0,
"startOnTick": false,
"endOnTick": false,
"max": 16.875,
"lineColor": "rgba(255,255,255,0)",
"index": 0
}
]
});
});
The correct format is actually like this:
And it also requires Highcharts 4.1.4 (I was using an older 4.0.4 actually).
"zones": [
{
"value": new Date().getTime(),
"color":'#7FC69E'
}
}