I need to set different widths for each column in my graph... The width is depends on yaxis value... For example if yaxis value is 23 the width of column with this value will be 50px and value need to be in the middle of the column. And if yaxis value is 234 : the width must be 70px and value in the middle of the column... How i can do this?
My graph is:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos', 'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
And i set values on this way:
var colors = Highcharts.getOptions().colors;
var index = 0;
options.series = [];
series.data = [];
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push({ y: parseInt(Data[i]), color: colors[index] });
index++;
}
else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);
Is this what you are looking for http://jsfiddle.net/YCf9z
you can get this by using
pointPadding: 0.1
hope this is useful for you
In Highcharts, one series could have only one width, so if you want to have each bar another width, split your data into series and use pointWidth to set width.
Related
I am working with chart.js to show some bar charts in reports. I was able to successfully integrate it in to my rails application and the bar charts are working fine.
For displaying data labels, I have used this plugin which also seems to work fine.
The problem I am facing now is the label styling. I am successfully able to change the color and font of the labels but unable to modify the letter spacing. I feel the labels are looking a bit cramped and vertically elongated and letter spacing would make it look better. I have attached the chartJS code and screenshot below.
Chart.defaults.global.plugins.datalabels.anchor = 'end';
Chart.defaults.global.plugins.datalabels.align = 'end';
Chart.defaults.global.legend.display = false;
// Chart.defaults.global.tooltipenabled = false;
$('.bar-chart-basic').each(function (i,obj)
{
var ctx = this.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(1, '#76ddfb');
gradient.addColorStop(0, '#2471a2');
var x_values = JSON.parse(obj.dataset.x_axis)
var y_values = JSON.parse(obj.dataset.y_axis)
var data = {
labels: x_values,
datasets: [{
data: y_values,
backgroundColor: gradient,
display: false,
scaleLabel: ""
}]
}
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
responsive:true,
maintainAspectRatio: false,
datalabels: {
display:false
},
legend:{
display: false,
labels: {
fontSize: 0
}
},
options: {
hover: { mode: null,animationDuration:0 },
tooltips: {enabled: false },
layout: {
padding: {
left: 0,
right: 0,
top: 18,
bottom: 0
}
},
plugins: {
datalabels:
{
align: function()
{
return 'end';
},
anchor: 'end',
color: function() {
return 'slategrey';
},
font: {
size: 8.5
},
opacity: 1,
formatter: function(value, context) {
div_id = context.chart.canvas.id;
var y_labels = JSON.parse(context.chart.canvas.dataset.labels)
display_text = y_labels[context.dataIndex]
return display_text
}
}
},
scales: {
yAxes: [{
display: false,
gridLines: {
display:false,
color: '#6c757d'
},
ticks: {
// max: Math.max.apply(Math,data.datasets[0].data.map(function(x) {return Math.abs(x)}))*2.5,
beginAtZero: true
}
}],
xAxes: [{
barPercentage: 1.0,
barThickness:20,
gridLines: {
display: false,
drawBorder: false
},
ticks: {
fontSize: 8 ,
fontStyle: "bold",
fontColor: "slategrey"
}
}]
}
}
});
});
Happy to give more clarity.
UPDATE
With the help of the comment by Joel Hager was able to add line spacing by editing the canvas css. But still unable to update line height of the label
I want impact graph to be started from the 0 base line and expand it in the negative y direction.
So in highcharts there is option like to set min and max to range the axis. But it dosen't work accurately. The y axis c I want this to be in the negative side as its value will be in negative percentage values.
chart: {
// type: 'column',
zoomType: "xy",
},
xAxis: [
{
categories:['a','b','c','d','e','f','g'],
crosshair: true,
},
],
yAxis: [
{
// Primary yAxis
min:0,
labels: {
format: "{value} In Million $",
style: {
color: Highcharts.getOptions().colors[0],
},
},
title: {
text: "A",
style: {
color: Highcharts.getOptions().colors[0],
},
},
opposite: false,
},
{
// Secondary yAxis,
min:0,
gridLineWidth: 0,
title: {
text: "B",
style: {
color: Highcharts.getOptions().colors[1],
},
},
labels: {
format: "{value} In Million $",
style: {
color: Highcharts.getOptions().colors[1],
},
},
opposite: true,
},
{
// Tertiary yAxis
min:-0.1,
startOnTick: -10,
endOnTick:-10,
,
title: {
text: "C",
style: {
color: Highcharts.getOptions().colors[2],
},
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true,
credits: {
enabled: false
}
},
],
tooltip: {
shared: true,
},
series: data,
};
I also specified threshold option to true in data series
data.forEach((item) => {
if (key == "A") {
obj["name"] = key;
obj["type"] = "column";
obj["yAxis"] = 0;
obj["threshold"] = 0;
obj["data"].push(item[key]);
obj["tooltip"]["valueSuffix"] = "In Million $";
}
if (key == "B") {
obj["name"] = key;
obj["type"] = "column";
obj["yAxis"] = 1;
obj["threshold"] = 0;
obj["data"].push(item[key]);
obj["tooltip"]["valueSuffix"] = "In Million $";
}
if (key == "C") {
obj["name"] = key;
obj["type"] = "column";
obj["yAxis"] = 2;
obj["threshold"] = 0;
obj["data"].push(item[key]);
obj["tooltip"]["valueSuffix"] = "%";
}
});
I want something like this:
Thanks in advance!
Use top and height properties to position the axes in the way you want.
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%',
offset: 0,
opposite: true
}]
Live demo: http://jsfiddle.net/BlackLabel/wrzLqsju/
API Reference:
https://api.highcharts.com/highcharts/yAxis.top
https://api.highcharts.com/highcharts/yAxis.height
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
}
I need to display the labels on X axis from the JSON data that I am pulling from my API.
but I think we can only give static labels for the axis ?
Can anyone please let me know how to give dymanic labels?
Here is my code:
var obj = data[$("#host").val()].iscsi_lif.result.sectoutput.sect;
var my_data_list = [];
var readsize = [];
for(var key in obj) {
var avg_latency = parseInt(obj[key].avg_latency);
var rsize = parseInt(obj['read_size_hist.<=128KB']);
my_data_list.push('Average Latency', parseInt(avg_latency));
readsize.push('Read Size',parseInt(rsize));
}
$('#graphcontainer2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Reads Sizing'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Read Size'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Read Size: <b>{point.y:.1f}%</b>'
},
series: [{
name: 'Read Size',
data: my_data_list,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
To use category xAxis type, point formats should include x-value as string, or name property. For example, expected input data format is:
series: [{
data: [ ['Me', 10], ['Myself', 20], ['I', 100] ]
}]
Will create three categories on xAxis: Me | Myself | I
So in your code should be something like this:
my_data_list.push([myLabel, parseInt(avg_latency)]);
Where myLabel is category string.
Instead type:category , use categories in xAxis (if you are not using highstock ,using highcharts)
chart.xAxis[0].setCategories(categories);
See working fiddle here
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);
}