Related
Here is the source code:
https://jsfiddle.net/24zrbqpL/
Highcharts.chart('container', {
"chart": {
"type": "line",
"polar": true
},
"xAxis": {
"min": 0.5,
"max": 6.5,
"categories": ['Clarify Objectives', 'Propose Initiates', 'Prioritise & Select', 'Track Performance', 'Review Portfolio', 'Adjust Course', ''],
"labels": {
"distance": 25
},
"tickmarkPlacement": "on",
"lineWidth": 0,
"gridLineColor": "#575756",
"title": {
"style": {
"fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
"color": "#666666",
"fontSize": "30px",
"fontWeight": "normal",
"fontStyle": "normal"
}
}
},
"yAxis": {
"plotBands": [{
"from": 1,
"to": 2,
"color": "#f8c4c0",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 2,
"to": 3,
"color": "#f39d96",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 3,
"to": 4,
"color": "#ee766d",
"outerRadius": "105%",
"thickness": "50%"
}, {
"from": 4,
"to": 5,
"color": "#eb584d",
"outerRadius": "105%",
"thickness": "50%"
}],
"reversed": true,
"min": 1,
"max": 5,
"allowDecimals": false,
"tickInterval": 1,
"tickAmount": 6,
"tickLength": 10,
"gridLineInterpolation": "polygon",
"gridLineColor": "",
"lineWidth": 0,
"tickmarkPlacement": "between",
"tickPixelInterval": 100,
"tickPosition": "outside",
"labels": {
"enabled": true,
"style": {
"fontWeight": "bold"
},
//"y": 25
}
},
"title": {
"text": "APM Spiderweb"
},
"series": [{
data: [1, 2, 3, 4, 5, 6]
}, {
}],
"plotOptions": {
"series": {
"animation": true,
"lineWidth": 4,
"marker": {
"radius": 8,
"symbol": "circle"
},
"_colorIndex": 0,
"_symbolIndex": 0
}
},
"credits": {
"enabled": false
},
"colors": [
"#7cb5ec",
"#90ed7d",
"#f7a35c",
"#8085e9",
"#f15c80",
"#e4d354",
"#2b908f",
"#f45b5b",
"#91e8e1"
]
});
Setting a whiteSpace to 'nowrap' in the labels.style object is a solution which you are looking for.
"labels": {
"distance": 25,
"style": {
"whiteSpace": 'nowrap'
}
},
Demo: https://jsfiddle.net/BlackLabel/edpcjL3k/
API: https://api.highcharts.com/highcharts/xAxis.labels.style
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
We have a chart that plots multiple series at once.
There are the main y-series (line type) that will have the main data readings.
There is the option to set two different 'levels' (line types) on the y-axis as well.
There are also options to have multiple additional y-axis bars (bar types).
With the x-axis being the datetime
Here is what a typical example of a chart looks like with valid date for the given range
This is working as expected.
We have the main y-series as the average air temp (left y-axis)
Then we have two bars, one for rainfall and one for irrigation (right y-axis)
And then the two 'levels', one red and one blue.
This is all great.
However, when we go to a date range in the future, where there is no air temp data, we get the following
Note that the start date is 2 days before the date range, and the end date looks equal distance from the end of the 'levels'
Interestingly if we remove the bars we get the following
This now shows the 'levels' to span the full width of the chart
If we remove the lines and just have the bars then we get the following (which is how it should look, but with the 'levels')
There seems to be something in here that is causing the conflict when there are multiple y-series without the main y-series.
I am setting the xAxis.setExtremes to the start and end dates of the date range we are looking at, but that seems to be doing nothing.
Here is the config;
{
"chart": {
"type":"line",
"animation": {
"duration":150
},
"events":{}
},
"credits":{
"enabled":false
},
"title":{
"text":""
},
"subtitle":{
"text":""
},
"tooltip":{
"shared":true,
"crosshairs":true,
"borderWidth":0,
"followPointer":true,
"useHTML":true,
"headerFormat":"<span style=\"font-size: 10px;\">{point.key}</span><br><br>"
},
"xAxis":[
{
"id":"x-axis",
"type":"datetime",
"crosshair":{
"snap":false
},
"title":{
"text":"25th Sep 2019 - 1st Oct 2019",
"margin":15
}
}
],
"yAxis":[
{
"id":"y-axis-sensors",
"title":{
"text":"ºC"
},
"reversed":false,
"visible":true,
"endOnTick":false,
"startOnTick":false,
"alignTicks":false
},
{
"id":"y-axis-moisture",
"title":{
"text":"mm"
},
"opposite":true,
"min":0,
"endOnTick":false,
"startOnTick":false,
"alignTicks":false,
"tickWidth":0,
"gridLineWidth":0
}
],
"series":[
{
"type":"line",
"yAxis":"y-axis-sensors",
"marker":{
"enabled":false
},
"lineWidth":1,
"animation":false,
"name":"Full",
"seriesGroup":"levelSeries",
"id":"series-level-range-full",
"color":"#31B5E0",
"showInLegend":false,
"states":{
"hover":{
"enabled":false
}
},
"enableMouseTracking":false,
"zIndex":5,
"step":true,
"data":[
[1569369600000,5],
[1569974400000,5]
]
},
{
"type":"line",
"yAxis":"y-axis-sensors",
"marker":{
"enabled":false
},
"lineWidth":1,
"animation":false,
"name":"Refill",
"seriesGroup":"levelSeries",
"id":"series-level-range-refill",
"color":"#D23333",
"showInLegend":false,
"states":{
"hover":{
"enabled":false
}
},
"enableMouseTracking":false,
"zIndex":5,
"step":true,
"data":[
[1569369600000,17],
[1569974400000,17]
]
},
{
"type":"column",
"yAxis":"y-axis-moisture",
"marker":{
"enabled":false
},
"name":"Rainfall",
"seriesGroup":"rainfallSeries",
"states":{
"hover":{
"enabled":false
}
},
"id":"series-rainfall",
"pointWidth":6,
"borderWidth":0,
"color":"rgba(41, 182, 246, 0.3)",
"data":[
[1569488400000,5]
],
"zIndex":10,
"stacking":"normal",
"stack":"moisture"
},
{
"type":"column",
"yAxis":"y-axis-moisture",
"marker":{
"enabled":false
},
"states":{
"hover":{
"enabled":false
}
},
"name":"Irrigation",
"seriesGroup":"irrigationSeries",
"id":"series-irrigation",
"pointWidth":6,
"borderWidth":0,
"color":"rgba(205,220,57, 0.3)",
"data":[[1569574800000,3]],
"zIndex":10,
"stacking":"normal",
"stack":"moisture"
}
]
}
I am at a bit of a loss here as to why this is happening.
Can anyone shed some light on this?
One of the solutions can be to add additional x-axis and bind line series to it. Then it looks like your expected result. Check demo and code posted below.
Code:
Highcharts.chart('container', {
"chart": {
"type": "line",
"animation": {
"duration": 150
},
"events": {}
},
"credits": {
"enabled": false
},
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"tooltip": {
"shared": true,
"crosshairs": true,
"borderWidth": 0,
"followPointer": true,
"useHTML": true,
"headerFormat": "<span style=\"font-size: 10px;\">{point.key}</span><br><br>"
},
"xAxis": [{
"id": "x-axis1",
"type": "datetime",
"crosshair": {
"snap": false
},
"title": {
"text": "25th Sep 2019 - 1st Oct 2019",
"margin": 15
}
}, {
"id": "x-axis2",
visible: false,
"type": "datetime"
}],
"yAxis": [{
"id": "y-axis-sensors",
"title": {
"text": "ºC"
},
"reversed": false,
"visible": true,
"endOnTick": false,
"startOnTick": false,
"alignTicks": false
},
{
"id": "y-axis-moisture",
"title": {
"text": "mm"
},
"opposite": true,
"min": 0,
"endOnTick": false,
"startOnTick": false,
"alignTicks": false,
"tickWidth": 0,
"gridLineWidth": 0
}
],
"series": [
{
"type": "line",
xAxis: 'x-axis2',
"yAxis": "y-axis-sensors",
"marker": {
"enabled": false
},
"lineWidth": 1,
"animation": false,
"name": "Full",
"seriesGroup": "levelSeries",
"id": "series-level-range-full",
"color": "#31B5E0",
"showInLegend": false,
"states": {
"hover": {
"enabled": false
}
},
"enableMouseTracking": false,
"zIndex": 5,
"step": true,
"data": [
[1569369600000, 5],
[1569974400000, 5]
]
},
{
"type": "line",
xAxis: 'x-axis2',
"yAxis": "y-axis-sensors",
"marker": {
"enabled": false
},
"lineWidth": 1,
"animation": false,
"name": "Refill",
"seriesGroup": "levelSeries",
"id": "series-level-range-refill",
"color": "#D23333",
"showInLegend": false,
"states": {
"hover": {
"enabled": false
}
},
"enableMouseTracking": false,
"zIndex": 5,
"step": true,
"data": [
[1569369600000, 17],
[1569974400000, 17]
]
},
{
"type": "column",
xAxis: 'x-axis1',
"yAxis": "y-axis-moisture",
"marker": {
"enabled": false
},
"name": "Rainfall",
"seriesGroup": "rainfallSeries",
"states": {
"hover": {
"enabled": false
}
},
"id": "series-rainfall",
"pointWidth": 6,
"borderWidth": 0,
"color": "rgba(41, 182, 246, 0.3)",
"data": [
[1569488400000, 5]
],
"zIndex": 10,
"stacking": "normal",
"stack": "moisture"
},
{
"type": "column",
xAxis: 'x-axis1',
"yAxis": "y-axis-moisture",
"marker": {
"enabled": false
},
"states": {
"hover": {
"enabled": false
}
},
"name": "Irrigation",
"seriesGroup": "irrigationSeries",
"id": "series-irrigation",
"pointWidth": 6,
"borderWidth": 0,
"color": "rgba(205,220,57, 0.3)",
"data": [
[1569574800000, 3]
],
"zIndex": 10,
"stacking": "normal",
"stack": "moisture"
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/juwc8f37/
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
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