Why are the columns in the demo code handing above the x axis. How do I make them stick to x axis.
Look at the https://jsfiddle.net/nmLo2sbu/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
lineColor: '#FF0000',
offset:0,
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
},
plotOptions: {
series: {
minPointLength: 3,
// stacking: 'normal'
}
},
series: [{
name: 'John',
data: [0, 0, 0, 0, 0]
}, {
name: 'Jane',
data: [0, 0, 0, 0, 0]
}, {
name: 'Joe',
data: [0, 0, 0, 0, 0]
}]
});
Highcharts are not able to calculate extremes on yAxis, so tick 0 is placed in the middle. Additionally, the default value in column series for threshold is 0. You can force to calculate extremes for example by using softMax property.
yAxis: {
...,
softMax: 1
}
Live demo: https://jsfiddle.net/BlackLabel/08ohe6m3/
API Reference:
https://api.highcharts.com/highcharts/series.column.threshold
https://api.highcharts.com/highcharts/yAxis.softMax
Related
Hi i am working on highcharts i am having a polar chart and i wanna display on y-axis time instead of angle. This is the one which i tried so far:
In x-axis i am having angle and i have given tickInterval: 45, so in the same way how to do this for time.
Highcharts.chart('container', {
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
format: '{value}°'
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}]
Demo
The process is the same as in a non-polar chart. You can use datetime axis type and data in [x, y] format.
It is also possible to use categories, example: https://jsfiddle.net/BlackLabel/L5p6krvd/
xAxis: {
type: 'datetime'
},
series: [{
data: [
[new Date('2020-5-12').getTime(), 115],
[new Date('2020-5-13').getTime(), 50],
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/pv0zm2ky/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I am getting a border for each data in a stacked bar graph.
ChartOptions :
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [{
y: 5,
borderColor: 'red',
borderWidth: 4
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{y: 2,
borderColor: 'red',
borderWidth: 4}, 2, 3, 2, 1]
}, {[enter image description here][1]
name: 'Joe',
data: [{y: 3,
borderColor: 'red',
borderWidth: 4}, 4, 4, 2, 5]
}]
});
codepen
I want something like this
image
Kindly help me with the correct ChartOptions which gives a single border around the bar without multiple borders around each bar.
Thanks and Regards
You can add fake series with a border and update it dynamically depending on changes on the chart or render a custom shape to simulate borders.
series: [..., {
showInLegend: false,
stacking: false,
data: [10],
grouping: false,
color: 'transparent',
borderWidth: 4,
borderColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/gtLm9hqk/
API Reference:
https://api.highcharts.com/highcharts/series.column
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
If you are trying to remove the red border, here is the solution:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [{
y: 5,
borderWidth: 1
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{
y: 2,
borderWidth: 1}, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [{
y: 3,
borderWidth: 1}, 4, 4, 2, 5]
}]
});
I am using histogram bell curve for a project, everything is working fine except flag position like given in picture.
Here is link of my jsfiddle https://jsfiddle.net/8q1t3mwb/4
var data = [1,2,3,4,5,6,7,8,9,10];
Highcharts.chart('container', {
title: {
text: 'Bell curve'
},
xAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
yAxis: [{
title: { text: 'Data' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
id:'dataseries',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
}]
});
See full code here, https://jsfiddle.net/8q1t3mwb/4
You see the points where they currently are because your flags are on the scatter axis. If you turn on the scatter points, you will see that.
Therefore, if you set the following for the flag series:
{
yAxis: 1,
xAxis: 1,
name: 'Pointer',
type: 'flags',
...
}
And adjust your x value according to the number on the bell curve you will be able to see the flag connected to the curve.
Working example: https://jsfiddle.net/ewolden/8q1t3mwb/6/
I want to display a small polar chart on my web site.
But there is an anoying behaviour. the container (circle) of the chart do not fit with the chart, it grow step by step. If a value is just too big, the chart will be lost in a huge empty circle.
Please, have a look on this jsfiddle to understand the problem :
http://jsfiddle.net/7zmT9/
Is it possible to force the frame to fit the chart? or to reduce the step value?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
polar: true,
height: 252,
width: 262
},
pane:{
size: '100%',
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 20], // replace 20 by 18 to see the a more fitted chart
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
Universal solution is to set maxPadding: 0 and sometimes endOnTick: false. See demo: http://jsfiddle.net/7zmT9/4/
yAxis: {
min: 0,
maxPadding: 0
},
You can indeed set the step, but I am not 100% sure if this is what you are looking for.
On your yAxis you can set the tickInterval
yAxis: {
min: 0,
tickInterval: 2 //change this value to suit your needs
},
I have updated your Fiddle. Is that what you are after?
I've been looking for a decent chart based solution for websites and I think HighCharts looks like it fits the bill. The documentation seems pretty good but there are a few weird things it's doing that I need some help with.
Fiddle here: http://jsfiddle.net/T78R9/
I have selected 6 labels but there the plugin is outputting 7
markers.
I'm trying to display the labels on the x-axis only with
nothing on the y-axis but the chart is outputting the labels on the
y-axis and not displaying the labels on the x-axis.
Is there a way to hide the legend? I can't find this option.
Code Below:
$(function () {
$('#chart-data').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['Pre-Clinical', 'Phase I', 'Phase II', 'Phase III', 'Phase IV', 'Launch',]
},
yAxis: {
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
align: 'top'
},
enableMouseTracking: false
}
},
series: [{
name: 'AMG 319',
data: [6, 0, 0, 0, 0]
}, {
name: 'BAY 80-6946',
data: [0, 5, 0, 0, 0]
}, {
name: 'GDC-0980 (RG7422)',
data: [0, 0, 4, 0, 0]
}, {
name: 'Buparlisib (BKM120)',
data: [0, 0, 0, 3, 0]
}, {
name: 'CUDC-907',
data: [0, 0, 0, 0, 2]
}, {
name: 'GDC-09',
data: [0, 0, 0, 0, 0]
}]
});
});
In order as asked:
The Categories do not determine the number of labels, only the content. If the data exceeds the number of categories, any additional points will be labelled numerically. To specify an x value corresponding to a category label, use the category array index (starting from 0) as the x value.
In a horizontal bar chart, the x and y axes are swapped - they literally just turn a column chart on its side.
you can set 'enabled: false' for the legend: http://api.highcharts.com/highcharts#legend.enabled
I am not sure why these things aren't working for you, but there is a legend enabled: false to hide legend, same with labels. But I wonder if you are confused about x/y axis since this is a bar chart and not a column chart. As far as your 6 vs 7 labels, I again believe it is the orientation confusing you and you have not specified labels for both axes, so Highcharts is making the labels for the unspecified axis, using the data you gave.
Check this out, done real quick but hopefully helps:
http://jsfiddle.net/T78R9/7/
// HighCharts Plugin
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
labels: {enabled:false},
categories: ['Pre-Clinical', 'Phase I', 'Phase II', 'Phase III', 'Phase IV', 'Launch',]
},
yAxis: {
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
align: 'top'
},
enableMouseTracking: false
}
},
series: [{
name: 'AMG 319',
data: [6, 0, 0, 0, 0]
}, {
name: 'BAY 80-6946',
data: [0, 5, 0, 0, 0]
}, {
name: 'GDC-0980 (RG7422)',
data: [0, 0, 4, 0, 0]
}, {
name: 'Buparlisib (BKM120)',
data: [0, 0, 0, 3, 0]
}, {
name: 'CUDC-907',
data: [0, 0, 0, 0, 2]
}, {
name: 'GDC-09',
data: [0, 0, 0, 0, 0]
}],
legend: { enabled: false}
});
});