I have highchart series data like this to have multiple dot on a column:
series: [{
"marker": {
"fillColor": "#69B0E0",
"symbol": "circle"
},
"type": "line",
"data": [
6000,
5500,
]
},
{
"marker": {
"fillColor": "#333f48",
"symbol": "circle"
},
"type": "line",
"data": [
1000,
4000,
]
},
{
"marker": {
"fillColor": "#b61f47",
"symbol": "circle"
},
"type": "line",
"data": [
11000,
3000,
]
}
]
but when I hover it, the red radius color is green instead of red, but other 2 colors are fine, I wonder is this a bug on highcharts.
demo: https://jsfiddle.net/a0e9bz8k/1/
The hover color is inherited from point.color or series.color, so you need to set one of them.
series: [...,
{
"marker": {
"symbol": "circle"
},
color: "#b61f47",
...
}
]
Live demo: https://jsfiddle.net/BlackLabel/p0h6eqk3/
API Reference: https://api.highcharts.com/highcharts/series.scatter.color
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/
is it possible in highchart to add the legend in each column with keeping
the value or label of each coulmn on top of the column like the attached image and this is my code on jsfiddle enter link description here
$('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"format": "${y}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}]
});
You can use the plotOptions.series.dataLabels.formatter instead of format:
dataLabels: {
enabled: true,
useHTML: true,
y: 30,
formatter: function() {
return "$" + this.y + "<br><br><br>" +
"<div style='-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);'>" +
this.series.name + "</div>";
}
}
You can tell the chart exactly the way you want the labels to be shown. this.y is the dollar values and this.series.name is the name of the series which are 2014 and 2015. y: 30 is where the label should be placed in respect to the top of the column. Here's a DEMO.
PS: The problem is that you cannot have two datalabels for each column. You either have to set the location for the top label (as mentioned in my answer) or set it for the bottom labels in this example. As you can see there are some problems in each example, but you can't have both. However there could be a workaround like this, but its not clean.
You can try to use stackLabels. Of course that solution will work only when you don't use stacking at all. See demo: http://jsfiddle.net/LLExL/4855/
Code:
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return "$" + this.total;
}
}
},
"plotOptions": {
"series": {
stacking: "normal",
"dataLabels": {
"enabled": true,
rotation: -90,
"format": "{point.series.name}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
Regarding aligning labels to the bottom, see this question.
I made some changes on solution of #Raeen to be exactly what i want
and here is the example demo
enter code jQuery('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
title:{
text:''
},
tooltip: {
enabled: false
},
"plotOptions": {
"series": {
"dataLabels": {
"inside":true,
"enabled": true,
useHTML: true,
y: 30,
formatter: function() {
var html ='';
labelHeight = this.point.shapeArgs.height-15;
html += '<div class="data-label-wrapper" style="height:'+labelHeight+'px;">';
html += '<span style="color:'+this.series.color+';">$'+this.y+'</span>';
html += '<span class="serie-name" style="top:'+(labelHeight-25)+'px">'+this.series.name+'</span>';
html += '</div>';
return html ;
}
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": false,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": false,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}] });
and now what i need if its possible to controll the number of gridlines numbers
to be like 3 instead of 8 that would be perfect.
I have highstocks set up to display two series of data.
When I zoom all the way the x-axis label for one of the series is always missing.
jsfiddle link
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.StockChart({
chart: {
"renderTo": "container"
},
plotOptions: {
"column": {
"stacking": "normal"
}
},
series: [{
"type": "column",
"name": "column 1",
"color": "#1d8ecd",
"data": [
[1296511200000, 974],
[1301605200000, 1618],
[1306875600000, 990],
[1312146000000, 1720],
[1317416400000, 516],
[1322690400000, 1472],
[1328047200000, 349],
[1333227600000, 1781],
[1338498000000, 649],
[1343768400000, 1124],
[1349038800000, 829],
[1354312800000, 1615],
[1359669600000, 1181]
]
}, {
"type": "column",
"name": "column 2",
"color": "#636466",
"data": [
[1293832800000, 1913],
[1298930400000, 1269],
[1304197200000, 567],
[1309467600000, 668],
[1314824400000, 722],
[1320098400000, 442],
[1325368800000, 1558],
[1330552800000, 1831],
[1335819600000, 373],
[1341090000000, 275],
[1346446800000, 1540],
[1351720800000, 998]
]
}],
});
});
Any ideas why is this happening and if I can force it to display all x-axis labels, at least when there is space for it?
http://jsfiddle.net/ramon_ackermann/PhjX7/2/
$(function () {
$('#container').highcharts({
chart: {
type:'column'
},
xAxis: {
min:0,
max:0,
categories: ["test"]
},
series: [{
"name": "ABELO",
"data": [
0.73
]
},{
"name": "UAAU",
"data": [
0.77
]
},{
"name": "ANCB",
"data": [
1.72
]
},
{
"name": "avg",
"type": "line",
"color": "#ff0000",
"data": [
{
"x": -0.5,
"y": 1.5
},{
"y": 1.5,
"dataLabels": {
"enabled": true,
"align": "right",
"verticalAlign": "bottom",
"formatter": function(){
return 'avg: ' + this.y;
},
"style": {
"fontWeight": "normal"
},
"x": 0.5
}
}
]
}
]
});
});
Before updgrading to Highcharts 3, the code above would work properly, drawing the line from left to right, but since I'm trying to upgrade to v3, I can't get the line to draw all the way to the right.
I devised the above solution from my previous question / answers (highcharts line not fully plotted)
The above sample is a simplified version of what I need, unfortunately plotLines is not a solution for me.
Simple solution is to extend another point onto your avg line:
...,{"x": 1.5, "y": 1.5}]
Why is a plotLine not appropriate?
I advice to use plotLine or use renderer.
http://api.highcharts.com/highcharts#yAxis.plotLines
http://api.highcharts.com/highcharts#Renderer.path