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
Related
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'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
How can I prevent this space:
I try a lot but no success.
Here is my options:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
"categories": []
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle link
Thanks in advance.
Remove the empty category definition on the yAxis to make highchart automatically generate values for the yAxis:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle working example: http://jsfiddle.net/ewolden/sq1hf68r/
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'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/