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/
Related
I made an area chart as in the example below:
Highcharts.chart('container', {
title: {
text: ''
},
plotOptions: {
series: {
allowPointSelect: true,
}
},
series: [{
data: [29.9, null, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, null, 194.1, null, 54.4],
type: 'area',
}]
});
Since my second value in a series is null, I see the first value as a dot. The same happens with the values in the end of the series. Is it possible to connect it to X axis with a line which will be colored as an area of the rest of the chart?
You need to set the series.connectNulls as a true to achieve it.
Demo: https://jsfiddle.net/BlackLabel/7qrtos3m/
API: https://api.highcharts.com/highcharts/series.area.connectNulls
Expected behaviour:
bar / point width should
be always same even after showing and hiding a series
Actual behaviour:
bars width is not same, middle bar is squeezed.
Live demo with steps to reproduce:
access the below fiddle and click on series 2 on legend(enabling), observe width of bars, middle bar's width is not same as others. I think highcharts is trying to fit the bars within the available chart width. how can I make sure bars are having equal width without space between them. I have tried with the below options
pointPadding: 0,
borderWidth: 0,
shadow: false,
pointWidth: 10,
https://jsfiddle.net/rammohanreddy201/mugp32hy/5/
`
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0,
shadow: false,
pointWidth: 10,
states: {
inactive: {
opacity: 1
},
hover: {
enabled: false
}
}
}
},
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],
visible: 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]
}]
});
`
Product version
7.x
Affected browser(s)
tried with chrome, but is not dependent on browser type
The columns have the same width, they just overlap. If you want to show entire columns, make more space for them, for example by setting groupPadding to 0.
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth: 10,
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/knm5xvtd/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
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 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/
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