Originally I have the plot border width set as 0 and then later I want to update it as per below. But it doesn't work. The tooltip part works and I believe the attribute is in the correct place.
chart.update({
tooltip: {
enabled: false
},
plotBorderWidth: 1
});
Any help appreciated.
Thanks
You need to put plotBorderWidth property in a chart object:
chart.update({
tooltip: {
enabled: false
},
chart: {
plotBorderWidth: 1
}
});
Live demo: http://jsfiddle.net/BlackLabel/9pcm0fon/
API Reference: https://api.highcharts.com/highcharts/chart.plotBorderWidth
Related
I want to disable or hide marked x-axis on the following image:
But I still need to be able to show a plot line.
I tried to play around with "xAxis" Highcharts property and I am able to hide marked x-axis, but then I can not add a plot line. It seems to me this axis is somehow connected with the plot.
Thanks a lot for help.
The plotLines are connected to an axis, but you can separately disable the grid and the labels:
xAxis: [{
...,
grid: {
enabled: false
},
plotLines: [{
color: 'red',
value: today + day * 7,
width: 5
}],
labels: {
enabled: false
},
tickLength: 0
}, {
visible: false
}]
Live demo: https://jsfiddle.net/BlackLabel/c2xLruvp/
API Reference: https://api.highcharts.com/gantt/xAxis.visible
I have just started using Highchart in my project and I am very much new to it.
I am stuck with two scenarios for drill down charts:
First I need to show a column chart, and on click of the column I have to show a pie chart with legends. I am looking on below example:jsfiddle
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
},
showInLegend: true
},
Second I have requirement to show drill down to three levels: Column chart to Column chart to Column Stacked Chart. I have not been able to find out a way to set the plotOptions correctly to achieve this.
Thanks in advance.
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.
I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});
I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.