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}
});
});
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
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
In this jsFiddle when all the series are de-selected except for series 1, it reads '-1'. Is this a bug in high charts or something I am doing wrong? I have tried a couple things, such as messing with the offset, showEmpty, nothing seems to work. Any ideas?
http://jsfiddle.net/mhant47c/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
yAxis: [{
width: '33.33%',
showLastLabel: false,
id: 'yA0'
}, {
left: '33.33%',
width: '33.33%',
offset: 0,
showLastLabel: false,
id: 'yA1'
}, {
left: '66.66%',
width: '33.33%',
offset: 0,
id: 'yA2'
}],
plotOptions: {
series: {
stacking: 'normal'
}
},
xAxis:{
showEmpty:false,
categories:['a','b','c','d']
},
series: [{
data: [1, 2, 3, 4]
}, {
data: [3, 2, 1, 6]
},
{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
},{
yAxis: 1,
data: [23, 43, 56,23, 43, 56]
}, {
yAxis: 2,
data: [123, 413, 516,23, 43, 56]
}]
});
The chart tries to center the columns which results in adding an additional category. To prevent this, use min option:
xAxis: {
min: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/6p84vx53/
API Reference: https://api.highcharts.com/highcharts/xAxis.min
English is not my native language.If you don't understand my question,please tell me.
I want to show the "beta axis title" and "beta axis label" in highchart. What I want is as follows:
However, what I got is here:
I googled.I didn't find any solution to my problem.
my javascript code is as follows.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 50,
depth: 110
}
},
title: {
text: null
},
xAxis:{
title: {
text: "构建日期"
},
categories: ["2010-10-17","2010-10-18","2010-10-19","2010-10-20","2010-10-21","2010-10-22"],
},
yAxis: {
title: {
text: "内存(MB)"
}
},
plotOptions: {
column: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10
}
},
series: [{
name: 'HUAWEI',
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
name: 'XIAOMI',
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
name: 'oppo',
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});
You need to set the zAxis categories to have the labels, and the zAxis title to have the title. It is important to note that to show the labels, you need to define a min and max. This is a minimal example that will show it all (on top of eachother):
zAxis: {
title: {
text: 'TITLE HERE',
},
min: 0,
max: 2,
categories: ["HUAWEI", "XIAOMI", "oppo"]
}
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/3/
There is a lot of options for tweaking the look of this, you should have a look at the API on zAxis labels/titles.
API on zAxis.titles: https://api.highcharts.com/highcharts/zAxis.title
For example you can rotate and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/5/
Or you can use skew3d and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/6/
It depends a lot on what you want to write as the title and labels. You will just have to experiment.
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?