Related
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 some big vertical(Y) axis label names. When they are displayed, they shrink the size of the actual chart and reading them becomes confusing.
Here is the image:
As can be seen in the image, the labels are unaligned. How to make them properly align?
Here are the chart options I am using:
{
"plotOptions": {
"series": {
"pointPadding": 0,
"borderWidth": 0
}
},
"chart": {
"height": "50%"
},
"rangeSelector": {
"selected": 1
},
"title": {
"text": "Index EOD Analysis"
},
"tooltip": {
"split": true
},
"yAxis": [
{
"labels": {
"align": "right",
"x": -3
},
"title": {
"text": "OHLC"
},
"height": "60%"
},
{
"labels": {
"align": "right",
"x": -3
},
"height": "20%",
"top": "60%",
"title": {
"text": "FII Consolidated PCR"
}
},
{
"labels": {
"align": "right",
"x": -3
},
"height": "20%",
"top": "80%",
"title": {
"text": "Net Seller Index"
}
}
],
"series": [
{...}
]
You can increase a width of the labels:
"yAxis": [...,
{
...
"title": {
...,
style: {
width: '200px'
}
}
}
]
Live demo: http://jsfiddle.net/BlackLabel/eb4g6rtc/
API Reference: https://api.highcharts.com/highcharts/yAxis.title.style
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
I'm trying to display a chart as a single, horizontal column with a vertical legend below it. Here's what I have so far:
Highcharts.chart('container', {
"legend": {
"itemMarginBottom": 10
},
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 700
},
"chartOptions": {
"legend": {
"layout": "vertical"
}
}
}
]
},
"chart": {
"type": "bar",
"margin": [
0,
0,
44,
0
]
},
"credits": false,
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true,
formatter() {
let value = this.y * 100;
return value > 4 ? `${ value.toFixed(1) }%` : null;
},
"overflow": "none"
},
"groupPadding": 0,
"pointPadding": 0
},
"series": {
"animation": false,
"pointPadding": 0,
"pointWidth": 40,
"stacking": "percent",
"events": {},
"marker": {
"states": {
"hover": {
"enabled": false
},
"select": {
"enabled": false
}
}
}
}
},
"series": [
{
"name": "Optimized",
"data": [
0.7455639561796032
],
"zIndex": 0
},
{
"name": "Partially Optimized",
"data": [
0.1260607930874859
],
"zIndex": -1
},
{
"name": "Not Optimized",
"data": [
0.064033328190094
],
"zIndex": -2
},
{
"name": "Plant Off",
"data": [
0.06434192254281708
],
"zIndex": -3
},
{
"name": "Communication Failure",
"data": [
0
],
"zIndex": -4
}
],
"title": false,
"tooltip": false,
"xAxis": {
"labels": false,
"maxPadding": 0,
"minPadding": 0
},
"yAxis": {
"endOnTick": false,
"labels": false,
"maxPadding": 0,
"min": 0,
"minPadding": 0,
"reversedStacks": false,
"title": false
}
});
And this is what it looks like:
The chart is responsive, and I'd really like to avoid setting a hardcoded height for the whole chart. Rather, I'd like for the plot height of the chart to be 40px, and for Highcharts to size the height of the chart to include the remaining room for the chart's legend.
Ideally, it would look like this:
Here's a link to the JSFiddle.
You can change height of xAxis and yAxis to 40px and on each redraw event calculate optimal height for chart (top margin + height of the yAxis + bottom margin). Take a look at the example below.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/chart.events.redraw
Example:
http://jsfiddle.net/e6hf0ms3/