I want to render a bar chart using highchart. It automatically starts to plot the bars from the center. How should i make the bars to start immediately from the bottom?
This is my portion of the code:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: [ 'Dec']
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
series: [{
pointWidth: 15,
data: [ 54.4]
}]
});
I expect the bars should start from the bottom.
You can use pointPlacement property:
series: [{
pointPlacement: -0.475,
pointWidth: 15,
data: [54.4]
}]
Live demo: http://jsfiddle.net/BlackLabel/2wht3yf4/
API Reference: https://api.highcharts.com/highcharts/series.bar.pointPlacement
Related
In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
I'm using Highchart to generate a line chart with data labels. Here is an example of what I'm doing:
Highcharts.chart('container', {
title: {
text: 'Chart without categories'
},
xAxis: {
categories: ['a','b'],
},
series: [{
data: [1,2]
}]
});
This code generates the following chart: As you can see, there is a space between the line and and the borders of the chart.
Without using categories, there is no space:
What can I do to remove this spaces?
That is a default behavior of category axis type. Please check this example: http://jsfiddle.net/BlackLabel/wuqxb2cy/ with a more visible distribution into categories.
As a solution you can set xAxis.tickmarkPlacement and series.pointPlacement to 'on':
xAxis: {
categories: [...],
tickmarkPlacement: 'on'
},
series: [{
data: [...],
pointPlacement: 'on'
}]
Live demo: http://jsfiddle.net/BlackLabel/qkezc3mx/
API Refefence:
https://api.highcharts.com/highcharts/xAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/series.line.pointPlacement
I'm using highstock with four yAxis. Every axis holds a series with more than 400 points. Initially the chart is correct but as soon as one does the slightest zoom or moves the navigator a little bit, the whole chart changes. Lines get connected where they shouldn't, the yAxis seems to be corrupted and data points are no longer respected.
Result: A chart showing totally wrong data.
This gets especially annoying when using an non ordinal xAxis, although it is not required for the bug to appear.
Expected view (without zooming or changed navigation):
After using the navigator points are connected, the yAxis changed unnecessary and the expected gaps are no longer visible:
The bug doesn't occurs with three axis or if all series are on one axis. It seems that it also depends on the height and width of the chart.
I have a JSFiddle for demonstration. Nothing special in this code. Mainly:
$(function () {
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'xy'
},
xAxis: {
ordinal: false
},
yAxis: [{
labels: {
format: '{value}°C'
},
title: {
text: 'Temperature1'
}
}, {
title: {
text: 'Temperature2'
},
labels: {
format: '{value}°C'
}
}, {
title: {
text: 'Temperature3'
},
labels: {
format: '{value}°C'
}
}, {
title: {
text: 'Temperature4'
},
labels: {
format: '{value}°C'
}
}],
series: [{
name: 'Temp1',
type: 'line',
yAxis: 0,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}, {
name: 'Temp2',
type: 'line',
yAxis: 1,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}, {
name: 'Temp4',
type: 'line',
yAxis: 3,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}, {
name: 'Temp3',
type: 'line',
yAxis: 2,
data: [{ "x": 1472569504959, "y": 37.0000003625635 }, ...
}]
});
});
This appears to be a function of the dataGrouping options.
Disable dataGrouping and it seems to work fine.
Code:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/ydqdd624/4/
Reference:
http://api.highcharts.com/highstock/plotOptions.series.dataGrouping
http://www.highcharts.com/docs/advanced-chart-features/data-grouping
The data labels when using 3d Pie Chart displays in an incorrect manner.
I only have two slices and most of the times, the labels of one slice ends up being in the space of other slice. See http://jsfiddle.net/tn036sak/
I do want to use the distance property so it does not show labels outside of the pie chart.
This is my code -
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 65,
beta: 0
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
distance:-40,
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 10.0],
['Chrome', 90]
]
}]
});
});
Please suggest how the labels can be shown on the respective slice.
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});