I use stacklabels in my stacked bar chart.
stackLabels: {
rotation : angelLabel,
style: {
fontSize: labelFontSize,
fontFamily: labelFontFamily
},
enabled:true,
color: '#000000',
useHTML: true
}
The code above works well at initialization. Now, I need to change "enabled" to false.
The code below is not working.
chart.options.yAxis[0].stackLabels.enabled = false;
chart.redraw();
How can i change stacklabels dynamically?
stackLabels is a property of a yAxis, so you could update that axis using API function Axis.update()
$(function () {
var chart = $('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
stackLabels: {
enabled: true
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
}).highcharts();
var enable = true;
$('#button').click(function () {
enable = !enable;
chart.yAxis[0].update({
stackLabels: {
enabled: enable
}
});
});
});
Example: http://jsfiddle.net/yqypj4qr/
Related
I'm using 3D Column Highcharts and it does not show the datalabels, in 2D is ok but 3D is not. It's also so strange that the png download shows the datalabels.
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Chart rotation demo'
},
subtitle: {
text: 'Test options by dragging the sliders below'
},
plotOptions: {
column: {
depth: 25
},
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
dataLabels: {
enabled: true
}
}],
});
I expect the datalabels can be shown at the top of the columns, need help and thanks a lot!
Not sure if you noticed it but upgrading to V7.2.1 will fix the issue.
I want to add a logo when printing and exporting Highcharts only.
i tried with exporting and it works fine but with no hope with printing.
http://jsfiddle.net/andrew_safwat/zt5qLwe1/
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
load: function () {
if(this.options.chart.forExport) {
this.renderer.image('http://highsoft.com/images/media/Highsoft-Solutions-143px.png', 80, 40, 143, 57)
.add();
}
}
}
},
series: [{
animation: false,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
any ideas please?
I am facing problem in removing yaxis in highcharts(highstock). I have the below snippet to explain the issue in a better way.
My chart loads with 3 initial yAxis and then I try to add or delete yAxis dynamically on the fly. For some reason its not removing the appropriate yaxis but removes series from another yAxis.
To reproduce the issue try to execute the following steps -
Click on "Add yAxis" button
Enter 1 in the text field and click on "delete yAxis" button
Click on "delete yAxis" button again
Click on add yAxis to add another axis
Click again on add yAxis to add another axis
Enter 2 in the text field and click on "delete yAxis" button
You will observe the yAxis we tried to remove got removed but it also removed the series from the last yAxis we added.
var chart;
$(function () {
var index = 0;
var data1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
var highchartOptions = {
chart:{
renderTo:'container'
},
navigator: {
outlineColor: '#0066DD',
outlineWidth: 1
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis:[{
title:{
text:"initial data"
},
id:'myaxis-'+ index++,
height:'14%',
top:'0%'
},
{
title:{
text:"initial data"
},
id:'myaxis-'+ index++,
top:'15%',
height:'14%'
},
{
title:{
text:"initial data"
},
id:'myaxis-'+ index++,
top:'30%',
height:'14%'
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
yAxis:1
},
{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
yAxis:2
}]
};
chart = new Highcharts.StockChart(highchartOptions);
$button = $('#button');
$delButton = $('#delbutton');
var axisCount = 4; // axisCount is 4 because the chart is loaded with 3 axis + 1 for the navigator
$button.click(function () {
var axisObj = {
title: {
text: "axis-" + axisCount,
id:'myaxis-'+ (index++)
},
};
chart.addAxis(axisObj, false);
var seriesData = new Object();
seriesData.name = 'axis-' + axisCount;
seriesData.yAxis = axisCount;
seriesData.data = data1;
seriesData.type = 'line';
chart.addSeries(seriesData);
chart.yAxis[axisCount].update({ height: '14%',top: (axisCount*15) + '%',offset:0 });
axisCount++;
});
$delButton.click(function () {
var delAxis = $('#delAxis').val();
chart.yAxis[delAxis].remove();
for(var i=delAxis;i<axisCount-1; i++){
chart.yAxis[i].update({ height: '14%',top: (i*15) + '%',offset:0 });
}
axisCount--;
});
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<button id="button" class="autocompare">Add yAxis</button><br>
Entrt yAxis index to delete:<input type='text' id="delAxis"/>
<button id="delbutton" class="autocompare">Delete yAxis</button>
<div id="container" style="height: 800px"></div>
I would like to have two pie charts to show up on my page, next to each other. They are both the same style but different data.
Is that possible and how?
Thank you
You can have multiple series of pie chart data on the same chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Group Name'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['20%'],
name: 'foo'
}, {
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
center: ['80%'],
name: 'bar'
}],
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
}
});
jsfiddle: http://jsfiddle.net/4NtBw/
Another solution is to set the same size for both charts. That would disable option to smart resize for pie with dataLabels and you will get two the same size charts both with enabled dataLabels.
Search center at : http://docs.highcharts.com/#polar-chart
It might help
I would like to show a different symbol on each poitn of a spline graph, only on mouse hover.
I put :
plotOptions: {
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
},
},
and
series: [{
name: 'Moyenne',
data: [{
x:1351731635000,
y:1.0,
marker: {
symbol: 'url(http://127.0.0.1:8080/images/N.png)'
},
name: 'MISTRAL (315)'
},{
x:1351735233000,
y:1.5,
marker: {
symbol: 'url(http://127.0.0.1:8080/images/SE.png)'
}]
And it has no effect unless i put marker enabling to true (and marker always displayed).
I tryied each combination, to put the enabling value in each point data with no effect.
Is anybody able to help me ?
You can achieve this by using marker option of series object Here is an example which is modified from the example of the api:
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 316.4, 294.1, 195.6, 154.4],
marker: {
symbol: 'triangle'
}
}, {
marker: {
enabled: false,
states: {
hover: {
enabled: true
}
},
symbol: 'url(http://highcharts.com/demo/gfx/sun.png)'
},
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
Demo http://jsfiddle.net/km67w/18/