I am drawing a bar chart using highchart.js
I do not want to show the x - axis data values.
Can any one tell me which option does it?
full config:
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
defaultSeriesType: 'bar'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [''],
title: {
text: null
},
labels: {enabled:true,y : 20, rotation: -45, align: 'right' }
},
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
}
},
tooltip: {
formatter: function () {
return '';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 35,
color: '#D9CDC1'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107]
}]
});
In HighCharts, bar graphs use inverted axes, so the bottom axis is really the Y axis. (See also "column" graphs where the graphic is rotated 90 degrees, in which case the bottom axis is the X axis.)
You need to add the following to the yAxis config
yAxis: {
labels: {
enabled: false
}
}
See the following for full example:
http://jsfiddle.net/k5yBj/433/
To hide labels on X-axis set the option labels: {enabled:false} like this:
.....
........
,
xAxis: {
categories: [''],
title: {
text: null
},
labels: {
enabled:false,//default is true
y : 20, rotation: -45, align: 'right' }
}
.....
....
To hide labels on y-axis set the option labels: {enabled:false} like this:
.....
.......
,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
},
labels:{
enabled:false//default is true
}
},
.........
......
Refer the documentation for futher understanding.
The above popular answer hides the labels only, this left tick marks for me which I also wished to remove.
In that case this works well
xAxis: {
visible: false
},
This is a simple solution to remove everything on the x/y axis for anyone interested. For more information please look here https://api.highcharts.com/highcharts/xAxis.visible
If hiding x data, then look at this
https://jsfiddle.net/anrilafosel/3g4z5kc3/
chart.xAxis[0].setCategories(newCategories);
for (i = 0; i < chart.series.length; i++) {
var newData = [];
for (j = 0; j < toggler_hc13.length; j++)
if (toggler_hc13[j] === 1)
newData.push(series_hc13[i].data[j]);
chart.series[i].setData(newData);
}
Related
I have a high chart code like this:
Highcharts.chart('linechart', {
chart: {
backgroundColor:'rgba(255, 255, 255, 0.8)',
borderRadius:5,
},
title: {
text: 'ROC Graph'
},
subtitle: {
text: 'Learning Evaluation'
},
xAxis: {
min: 0,
max: 1,
tickWidth:1,
tickPositions: [0.001, 0.01, 0.1,1]
},
yAxis: {
max: 1,
tickInterval:0.1,
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0.30
}
},
});
And my javascript code:
for(j=0; j<data.roc_buffer[i]['xs'].length/10;j++){
x_plot = data.roc_buffer[i]['xs'][10*j]
y_plot = data.roc_buffer[i]['ys'][10*j]
plot_buffer[j] = {'x':x_plot, 'y':y_plot}
}
roc_chart.addSeries({
name: data.roc_buffer[i]['plotname'],
data: plot_buffer
});
It work out fine like this
However, I want the [0.001,0.01,0.1,1] all have same width so I need to adjust the xaxis to type logarithm. So I switch my code to:
xAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
Now the line disappear...
Also my data is something like
[{x:integer,y:integer},{x:integer,y:integer},{x:integer,y:integer},...]
What I understand.
Your xAxis and yAxis both value dynamically generated.
You can set data using setData method for yAxis and setCategories for xAxis.
$('#button').click(function () {
highchart.series[0].setData([1, 2, 4, 8, 16]);
highchart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M']);});
or Check jsfiddle link
http://jsfiddle.net/ashish8833/w3o0jzL7/1/
I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.
You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks
I got common dataset for both line series and bar graph . In other words dataset consists both line series dataset and bar graph dataset. Now I want to plot line series graph on separate x-axis and bar graph on separate x-axis. And want to control them both from same frame. Like both tooltip for both should come in same popup, from same section I can show and hide them. Attached my screenshot , currently they are sharing same x-axis. I want to separate them. Here is my piece of code.
for(j=0; j<timelinejson.length; j++){
seriesOptions[j] = {
//name: selectedMarkers[i],
name: timelinejson[j].marker_desc,
data: mData,
marker : {
enabled : true,
radius : 3
},
type : 'spline',
tooltip : {
valueDecimals : 2
}
};
}
seriesOptions[10] = {
name: 'Speed',
data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],
type: 'column',
valueDecimals: 1
};
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {
$('#trendChart'+temp).highcharts('StockChart', {
chart: {
height: 400
//width: 500
},
rangeSelector: {
selected: 4
},
yAxis: {
/*labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},*/
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2
},
series: marker_array_main
});
}
I think that you can use multiple yAxis in case of your chart. You can add as many yAxes as you want and you can connect your series with this axes using yAxis:x parameter in your Series object.
x value is an index of specific axis in yAxis array.
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Here you can find simple example of this kind of chart from Highcharts demos:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Below is a bar graph where the green bars never go over 100 and the red bars never go below -100.
However in the graph's yAxis you can see -150%.
I found this fix here, however it did not work. yAxis: {min: 0, max: 100}
Is there another way to accomplish this?
Here is the area where I add those bar graphs
function addSentimentSeries(name, data) {
var index = findTheIndex(name);
var color = name === 'Positive sentiment' ? '#009900' : '#FF0000';
if (index) {
chart.series[index].update({
showInLegend: false,
yAxis: 2,
type: 'column',
name: name,
color: color,
data: data,
dataGrouping: { enabled: false }
}, true);
} else {
chart.addSeries({
showInLegend: false,
yAxis: 2,
type: 'column',
name: name,
color: color,
data: data,
dataGrouping: { enabled: false }
}, true);
}
chart.hideLoading();
chart.redraw();
}
This is the 'fix' I implemented from the answer I found above, it did not do anything, my bar graphs still display -150%
vm.config.yAxis.push({
height: '30%',
top: '70%',
gridLineWidth: 0,
title: {
text: 'Sentiment',
style: { color: '#BFBFBF' }
},
yAxis: { min: 0, max: 100 },
offset: 0,
labels: {
formatter: function() {
return this.value + '%';
},
style: { color: '#BFBFBF' }
},
opposite: false
});
You should set the minPadding and maxPadding parameters as 0, then you reduce the spacing on a axis.
yAxis: {
minPadding: 0,
maxPadding: 0
}
Kindly take a look at following fiddle in which i tried to remove the categories but on removing categories its placing numbers instead of it by default and also showing those numbers in tooltip.
All I am trying to do is that categories or numbers doesnot display on chart or on tooltip and only stackedbar appears on the chart , So kindly let me know how can i do it .Thanks,
http://jsfiddle.net/EJFsH/3/
$(function () {
var data = [ {
name: 'Year 2008',
data: [0, 914, 4054, 732, 34]
}];
data = $.grep(data, function (category) {
return $.grep(category.data, function (item) {
return item > 0;
}).length > 0;
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: data
});
});
I'm not 100% sure of what you are asking for. But, to turn off the XAxis or yAxis labels, juse labels : {enabled:false} and to change the tooltips use tooltip:{formatter: function() {...}}
see this fiddle:
http://jsfiddle.net/6ypq4/
xAxis: {
title: {
text: null
},
labels : {
enabled: false
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify',
enabled: false
}
},
tooltip: {
formatter: function() {
return this.y + ' millions';
}
},