What I am trying to achieve is to have a highcharts that width continues increasing as data points increase
currently, I have the following
AM using vuejs with highcharts but should be similar to jquery or others
<div class="col-md-6" style="overflow:auto"> //set overflow css
<div id="container_h"></div>
<div>
now the script code that renders the highchart
this.chart = Highcharts.chart('container_h', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: this.ranges
},
yAxis: {
min: 0,
title: {
text: 'Total trucks'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: this.chartdata
});
The above renders a chart with the
What I am looking forward to achieve is this: the highchart columns to have a fixed width which when it grows it creates a scroll on x-axis so something like this
that has a scroll area
How do I achieve this?
You need to use highstock.js.
There is already an answear there: How to make highcharts scrollable horizontally when having big range in x-axis thanks to #Gopinagh.R
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a
stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations http://api.highcharts.com/highstock#scrollbar.
http://jsfiddle.net/gopinaghr/kUSyF/1/ I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
} Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example http://jsfiddle.net/gopinaghr/kUSyF/293/
Related
I have created piecharts in my django project using highcharts.Each pie is in a seperate div and the width of all divs are set to 25%.I have created the pie using a for loop so they all have the same properties yet the pies differ in size.What could be the reason for this.
This is the code for my div.
var div = document.createElement("div");
div.id = "container"+i;
div.style.cssFloat = "left";
div.style.width="25%"
document.getElementById("main").appendChild(div);
And this is the code for my chart
for(i=0;i<res.length;i++)
{
Highcharts.chart('container'+String(i), {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: server[i]
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Success',
data: res[i]
}]
});
}
Pie size by default is automatically adjusted so that data labels have enough space to be rendered. This behavior can be changed by setting plotOptions.pie.size - the diameter of the pie relative to the plot area.
Code:
plotOptions: {
pie: {
size: '50%' // Can be a percentage or pixel value
}
}
Demo:
with fixed size: https://jsfiddle.net/BlackLabel/yptnreda/1/
without fixed size: https://jsfiddle.net/BlackLabel/zfpd3at7/1/
API reference:
https://api.highcharts.com/highcharts/plotOptions.pie.size
I have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>
I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.
It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/
I'm creating a HighStock column bar chart. I have enabled the scrollbar using scrollbar: enabled. The scrollbar works fine for smaller datasets, but this dataset has a lot of categories(I've only included half as many as I need). For some reason, after a certain number, the rects for the bar chart won't properly show(or show wrong values) and the xAxis labels display as numbers rather than their actual names. Also, I'm trying to add IDs to each of the bars to add click events, but it only adds IDs to bars that are properly rendered initially. I have also noticed that I can properly add IDs even with a scrollbar to smaller data sets because all of the rect elements are properly rendered. Is there any way to make this scrollbar work for larger datasets?
You'll see what the problem described above looks like in this link:
https://jsfiddle.net/sauravvenkat/96ue59qy/
Highcharts.chart('container', {
chart: {
type: 'column',
color: 'rgb(245,111,35)',
},
title: {
text: 'Physicians By Specialty'
},
subtitle: {
text: 'Source: Physician Specaialty'
},
xAxis: {
type: 'category',
title: {
text: null
},
scrollbar: {
enabled: true
},
// min: 0,
max: 7,
tickLength: 0,
labels: {
rotation: -60
}
},
yAxis: {
title: {
text: 'Profiles',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Totals',
color: 'rgb(245,111,35)',
data: [["Spec1",1000],["Spec2", 1000], ["Spec3",500],["Spec4",300],["Spec5",1000],["Spec6", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300],["Spec37",300], ["Spec38",300], ["Spec39",300], ["Spec40",300], ["Spec41",300], ["Spec42",300], ["Spec43",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Spec47",1000],["Spec48", 1000], ["Spec49",500],["Spec50",300],["Spec51",1000],["Spec52", 1000], ["Spec53",500],["Spec54",300],["Spec55",1000],["Spec56", 1000], ["Spec57",500],["Spec58",300],["Spec59",300],["Spec60",300], ["Spec61",300], ["Spec62",300], ["Spec63",300], ["Spec64",300], ["Spec65",300], ["Spec66",300], ["Spec67",300], ["Spec68",300], ["Spec",300],["Spec24",1000],["Spec25", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Unknown",250]]
}]
});
It happens because the number of points in series is bigger than the default value of the cropThreshold property (more about below, in the API Reference section). As a solution, set the property with the bigger value.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.column.cropThreshold
Example:
https://jsfiddle.net/q8pn2dwf/
I'm trying to configure the pie chart to use the minimum space possible.
I have set the fixed diameter (to the circle, not to the container) so that i can compare two charts.
Did not set the fixed width and height (to the container) as it can hide the labels (Labels are dynamic. Sometimes they can be long. And they are of different length for each chart.)
Here is the jsfiddle.
Please note that there are two charts one below the other.
Here is my code:
$(function ()
{
draw('container1');
draw('container2');
function draw(id)
{
$('#' + id).highcharts(
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title:{ text: null },
legend: { enabled: false },
credits: { enabled: false },
tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
size: 100,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [/* data */]
});
}
});
Current issues:
There is some unused space around the chart (gray colored).
Right hand side some part of the label is hidden even though there is space available on the left side.
Edit 1: From the api docs it seem to use default height 400px and width 600px, if not set on the container element. Is there any way to instruct it to use the minimum required width and height?
Reason for 2: size of the pie chart, you wouldn't see it if you increase the size.
Reason for 3: highcharts does not automatically recenter the chart if you set the size of the chart, and the center of the chart would be center of the div, which leads to cutting off the labels.
If you don't set the size, highcharts would recenter the chart to accomodate all the labels in the plot area.
Try using minSize instead of size.
Hello I have a column Chart which displays servers. The X-axis shows how much they are used and the Y-axis counts them. Now I have for every group (with group I mean all Server on acolumn like "0-5%") an array of the server names. I would like to display this array in the right corner when I hover them like here with the value: Link
This is the code I already have the obj are Arrays which count the servers:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Server Disk root used in %'
},
subtitle: {
text: 'All Linux Servers'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Anzahl Server'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Anzahl Server: <b>{point.y}</b>'
},
series: [{
name: 'Server',
data: [
['0-5%', obj2],
['5-10%', obj5],
['10-15%', obj8],
['15-20%', obj11],
['20-25%', obj14],
['25-30%', obj17],
['30-35%', obj20],
['35-40%', obj23],
['40-45%', obj26],
['45-50%', obj29],
['50-55%', obj32],
['55-60%', obj35],
['60-65%', obj38],
['65-70%', obj41],
['70-100%',obj44]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 5,// 5 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Here is a picture of my Chart:
The Arrays which I want to dsiplay when hover look like that
obj1 = ["server11", "server1125", "server1127"]
For every column there is an array like that this one is the array for the 0-5% column.
You need to use tooltip positioner function and define x,y coordinates where you want to show it.
positioner: function () {
return { x: 500, y: 30 };
}
See the fiddle here
The link you provided itself answers it. Not sure where you are getting stuck? Could you elaborate?
You need to use mouseOver and mouseOut event functions inside plotOptions to define what needs to be show when hovering over the data points.