highchart hide xaxis categories - javascript

im using highchart and I want to hide the xaxis categories (the numbers on the bottom of the chart, please see the below image reference). Does anyone knows how to hide it?

Use:
xAxis: {
labels: {
enabled: false // disable labels
}
}
API reference.

Related

stackLabels configuration in Highcharts

I am working with highcharts and having some problems with stackLabels configuration of highcharts. I was asked to display a bar chart with "score/full score" format, e.g. 6 out of 10 should be like
⬛︎⬛︎⬛︎⬛︎⬛︎⬛︎⬜︎⬜︎⬜︎⬜︎ 6/10
And I faked it with stacked bar chart with 6 for the first part of the bar and 4 for the second part.
[Solved] However, I don't know how to display 6/10 in stackLabels (It seems that I can only use {total} in it, while I can use {point.y}/{point.fullscore} in dataLabels).
[Unsolved] And also, when I use the basic bar chart, dataLabels automatically adjust its position (In my case, dataLabels will show on the left of the right edge of the bar). However, how should I force the stackLabels to display?
This answer points out that there is no enough space for stackLabels to display, and the solution is to make max value bigger and leave some space for it. However, the solution is not that elegant to me, and also since my bar chart is horizontal and the label should be long.
Any help will be appreciated! Thanks in advance!
To answer second question:
You can set yAxis.stackLabels.crop to false, so labels will be rendered always. Those labels won't show up inside the plotting area, but will be rendered somewhere outside. stackLabels are not dataLabels - dataLabels have option justify, which forces labels to be rendered inside the plotting area.
However, in Highcharts you can get access to those labels, and move them (that's why crop needs to be set to false - to render labels anyway), here is simple POC:
function updateStacks() {
var chart = this,
H = Highcharts,
padding = 15,
item,
bbox;
for (var stackName in chart.yAxis[0].stacks) {
for (var itemName in chart.yAxis[0].stacks[stackName]) {
item = chart.yAxis[0].stacks[stackName][itemName]; // get stack item
bbox = item.label.getBBox(true); // get label's bounding box
// if label is outside, translate it:
if (bbox.width + bbox.x > chart.plotWidth) {
// add some poding, for a better look&feel:
item.label.translate(-bbox.width - padding);
}
}
}
}
Now simply use that method in load and redraw events, here you are:
chart: {
type: 'bar',
events: {
redraw: updateStacks,
load: updateStacks
}
},
And live demo: http://jsfiddle.net/awe4abwk/ - let me know if something is not clear.
PS: Your answer with formatter for stackLabels is good!
Use formatter to change default stack label. You can access axis label with this.axis.
stackLabels: {
enabled: true,
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
//Make your changes here to reflect your output. This is just a sample code
}
}
Now to always show stack labels you have two options which are described here.
Link
Okay, I've found the solution for the first question: How to show the specific series values in stackLabels? from this answer.
In my case, the code should be:
yAxis: {
stackLabels: {
formatter: function() {
return [this.axis.series[1].yData[this.x], '/', this.total].join('');
},
enabled: true,
}
}
If you have better solution, post it! And I still have no idea about how to find it in the docs, maybe I should dig more...

Display tooltip on mouseover in the Highchart Stack Column Total

I was looking at this highchart stacked column - Highchart Demo
and I'm wondering if it's possible to have a tooltip when you mouse over the total stacked label.
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
I wanted to achieve something like this - See Image here.
Note: I wanted to have a tooltip on mouseover the Total Stacked Label not on the column series.
You can use a custom-events plugin which allows to cache events on stackLabels.

Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis

When using Highcharts (v.3.0.5), I have multiple Y Axis displayed in the same chart. Using the legend, a user can choose to hide or show any of the Y Axis as they want. All this is built in feature of the Highcharts javascript library. However, when a Y Axis is hidden, its Title still appears visible in the Chart. I would like to hide it when the rest of the Y Axis is hidden. Surprised this is not the default behaviour already. Does anyone know how to do that?
The behaviour can be seen by looking at the example provided on Highcharts examples page:
http://www.highcharts.com/demo/combo-multi-axes
If you hide the "rainfall" axis for example, the title remains in the chart as "Rainfall".
I found this post (several years old) where the exact same question was asked. However, the solution proposed does not work. The show and hide events, redisplay everything.
http://forum.highcharts.com/highcharts-usage/how-to-hide-y-axis-title-multiple-axis-t6973/#p32842
This actually turns out to be a much sought after question/answer. Since Highcharts V2.2, it is possible to assign "showEmpty: false" to y axis definitions and this will ensure that when hidden, the Y-axis text label is also hidden. Example snippet of config below:
yAxis: [{
min: 0,
showEmpty: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#3366CC'
}
},
title: {
text: 'Clicks',
style: {
color: '#3366CC'
}
},
id: 'Clicks'
},
...
I have read reports where this showEnabled = false breaks if both min and max are also set. In the case above, where only min is set, it worked well for me using Highcharts V3.0.5
you can use yAxis.setTitle() and set/remove the title when needed.
here is the api documentation link
#arcseldon, it is true that showEnabled = false breaks if both min and max are also set. A possible workaround in this case is to set floor and max instead

How do I get labels on Pie Chart Wedges in Kendo UI

http://jsfiddle.net/XPK3f/
I am looking to add the wedges of Pending Issued Closed actually on the wedges.
I believe the changes need to be made in one of these objects.
seriesDefaults:
labels:
visible: true,
template: "${value} ${category}",
series:
type: "pie",
data: dataSet
Here is an example of how the series will have labels in the actual chart and not just on the legend. Please see the JSFIDDLE for details.
Thanks!
pie chart http://www-958.ibm.com/software/data/cognos/manyeyes/images/pie-chart.gif?1292295884
I'm not 100% sure what you are asking, but yes, using a template inside the series-defaults labels, you can put pretty much whatever you need as the label.
seriesDefaults: {
labels: {
visible: true,
template: "${category} - ${value} clients"
}
}
http://jsfiddle.net/XPK3f/2/

Cannot set Individual Point color in Series for Highstock API, it works for Highchart API

I am working on Highstock, I am trying to set a color to a specific point in "data" in Highstock, like in the example, its using Highchart API,but I couldn't get it to work with Highstock API, no matter how I set the color, it doesn't show on the graph.
Can someone please help?
Here is what I have tried so far
Highstock has point markers disabled by default, you will need to enable them explicitly as follows,
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
API Reference: http://api.highcharts.com/highstock#point.marker.enabled
Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-marker/
jsFiddle for your code: http://jsfiddle.net/jugal/nrRDg/

Categories

Resources