I am trying setup a chart in Decipher - data colleciton platform that uses Highcharts for it dashboards. Even though the syntax is a somewhat different but the logic the same. Could you advise how I can remove these spaces in the image?
Screenshot
It is a simple bar chart with these options:
title.text "Leaves your skin feeling really refreshed"
title.style.minWidth "120px"
title.style.fontSize "10px"
title.style.fontWeight "bold"
title.useHTML true
title.align "left"
legend.enabled false
xAxis.labels.style.fontSize "8px"
xAxis.labels.useHTML true
xAxis.visible false
yAxis.min 0
yAxis.max 50
yAxis.visible true
yAxis.tickInterval 10
plotOptions.series.dataLabels.formatter function() {return this.series.name;}
plotOptions.series.dataLabels.inside true
plotOptions.series.dataLabels.style.fontSize "8px"
plotOptions.series.dataLabels.align "left"
I think I've tried all possible margin/padding options and none of the work. It could be that Decipher overrides some Highcharts functionaly but wanted to check here.
Thanks
Ok, it seems "plotOptions.series.groupPadding 0" did the trick.
Related
I am looking to hide series labels when a series is hidden via the legend.
This issue is prevalent on highcharts own JSFiddle, where hiding a series leaves the name behind.
series : [{
name : "labelName",
data : [1,2],
label: { enabled : true } <-- this guy won't go away
}]
It baffles me that I can not find an answer to this question as I assume it would infuriate many, so I presume I'm missing something obvious.
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
I wanted to enable data labels in the chart I created. However, when I saw the graph all the data labels are not visible/drawn. In this image you cannot see the data labels in all points
However as part of this post, I wanted to give the fiddle with the chart text that is generated for your reference. But when I ran that fiddle it seemed like it was working. I am not sure if I am missing any thing.
Another issue is the tool tip is gone. Can I not have tooltip along with the data labels? Data labels are essential for me since the downloaded images wont have tool tip and datalabels come handy. Tooltips are handly in web application.
Can any one help me in this here?
Here is the code from the jsfiddle I am talking about:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
}
The issue is enableMouseTracking: false. Setting this means that HC will not listen to where the mouse is so it doesn't know where to put the tooltip. Turn this back on and tool tips will show.
Also, you have tons of dangling commas on your jsFiddle. Click on JSHint at the top to highlight them. Chrome and FF can sort of ignore them but other browsers like IE will throw errors.
You need to use crop to show all datalabels.
On hiding both the series using legends, and then clicking one of the series shows xAxis starting from '-1', when ideally it should show only not null categories.
Using 'ignoreHiddenSeries: false' solves the purpose but again on hiding both the series using legend and then enabling other series tends to overlap both the series. Although on window resize event, series get aligned properly.
chart: {
type: 'column'
// ignoreHiddenSeries: false
},
Example for reference: http://jsfiddle.net/t88rc/
You can simply set for xAxis min:0, see: http://jsfiddle.net/t88rc/2/
Grouped column charts work best with equal number of data points per series.
Best solution I have found for this is to fill any missing data points with null values:
http://jsfiddle.net/jlbriggs/t88rc/1/
data: [49.9, 71.5,null,null,null,null,null,null]
I use Highchart to display an inverted graph with multiple series.
an HighStock chart should be better for what I need but I had to use it with the inverted option that is available only in HightChart.
How can I display a comparator line following my cursor on my multiple series chart ?
( like in this example from HighStock )
secondary question : why is it so many differences between highstock and highcharts ?
would be perfect to use the better of those two worlds together.
Ok I've found it.
using the tooltip shared option as:
tooltip: {
shared: true,
crosshairs: true
}
it works great on inverted charts too, the misunderstood was because this setting is enable by default in HighStock graphs.