While trying to use https://github.com/blacklabel/grouped_categories/ i managed to get it working with an output as shown below
Is there a way that the following options can be modified
1. Removing the grids (I could manually change the stroke-width of those elements in the html to 0 to remove the grids, Is there a property / any other way available to do this?)
2. spacing between the categories
3. shifting the entire category table, so that i can insert a custom axis above it?
As you can see in the Grouped Categories plug-in documentation, you can use the groupedOptions property to apply your styles :
xAxis: {
labels: {
groupedOptions: [{
style: {
color: 'red' // set red font for labels in 1st-Level
}
}, {
rotation: -45, // rotate labels for a 2nd-level
align: 'right'
}],
rotation: 0 // 0-level options aren't changed, use them as always
},
categories: /* Your grouped categories */
}
You can therefore style almost everything you want of the xAxis.
EDIT
This will only allow you to modify the labels style. Sorry.
Related
I create a packed bubbles with a useHTML option for the datalabels because I want these labels to be centered in each bubbles.
The result is fine, you can see it here : https://jsfiddle.net/vegaelce/1tk0m4qs/8/
My issue is about the parent node label, I would like it to be placed on top of each major bubble (as in the offical demo : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-packedbubble/packed-dashboard)
But as I need to set the useHTML flag on dataLabels, the label of parent node is placed in the center of each major bubble (which is not good).
If you set useHTML : false in my sample, the label of parent is correctly placed on top of the major bubbles but the labels of each bubbles is not centered anymore.
dataLabels: {
useHTML: true,
How can I mix the two things (useHTML and place the parent label on top of bubble) ?
You don't need to enable useHTML to center the labels. It is enough to set align: 'left' and 'text-anchor': 'middle' style. For example:
plotOptions: {
packedbubble: {
...,
dataLabels: {
...,
align: 'left',
style: {
'text-anchor': 'middle'
}
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/hdgL8yeb/
API Reference: https://api.highcharts.com/highcharts/series.packedbubble.dataLabels
if I have a large amount of data then the xAxis label is not showing properly. you can see in this code: https://jsfiddle.net/4nvmuc25/127/
if I have a low amount of data then it's fine my xAxis label is showing correctly.
so I want to show the xAxis label properly if I have a large amount of data.
Restriction: 1:you can't change the rotation property for xAxis.
2:xAxis labels should not intercept each other.
3:you can't do by css.
Not restriction: you can set tickInterval, step property in xAxis but remember the amount of data is dynamic, it could be any number.
You should not use category x-axis type in this case. In API we can read:
step: number
...
By default, when 0, the step is calculated automatically to avoid
overlap. To prevent this, set it to 1. This usually only happens on a
category axis, and is often a sign that you have chosen the wrong axis
type.
As a solution use linear axis with a custom formatter function for labels:
const labels = [
"Apr-1",
"May-2",
...
];
Highcharts.chart('container', {
xAxis: {
...,
labels: {
...,
formatter: function() {
return labels[this.pos]
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/Lk8aogpq/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
The space for xAxis generally is rendered dynamically by the Highcharts library and add the ellipsis in the correct place, making it display from the start and cutting it when it stop displaying it on the graph with some ellipsis.
When I try to change that space to not render dynamically, the property marginBottom does it,but it stops picking up when the text should start displaying and the start of the text is cutted from the down of the graph. Is there a way to render correctly the text at the bottom from the highcharts? I Do need it to be rotate 270 degrees, and not let the auto rotate work, and don't want to collapse more part of the graph just for displaying the text.
Here is a sample when that happes:
Highcharts.chart('container', {
chart: {
height: 350,
spacingBottom: 0,
marginBottom: 50,
type: "column"
},
series: [{
name: 'Total',
data: [1,2,3,4,5]
}],
xAxis: {
categories: ["very long name to test if the characters are rigth and cropped",
"Not so long but long enough", "I still am long and out of the screen",
"lets see how is cropped", "cropped", "crop"],
labels: {
rotation: 270
}
}
});
Sample fiddle with marginBottom : https://jsfiddle.net/ragmar/6ru4hze3/
If you remove the marginBottom, even the legend move down a bit.
It is possible to do this behavior? even including some css?
Thanks in advance
To make it work the way you want, you have to make some modifications in Highcharts core. For example you can do not use marginBottom option, but set fixed value as a commonWidth variable in renderUnsquish method:
if (attr.rotation) {
commonWidth = (
maxLabelLength > chart.chartHeight * 0.5 ?
40 : // changed from 'chart.chartHeight * 0.33'
maxLabelLength
);
if (!textOverflowOption) {
commonTextOverflow = 'ellipsis';
}
}
Live demo: https://jsfiddle.net/BlackLabel/moL1tw6c/
I have a bar chart with one group of five items. Strangely, the distance between the bars within the same group is different. I tried out almost all imaginable settings as on the references list, but in vain.
Here is the graph.
The PlotOptions code is this:
plotOptions:
{
series:
{
borderWidth: 0,
shadow: false,
pointWidth: 10
}
},
The problem is with pointWidth property - your chart is to small for that value, remove that or change to something like ~7.
I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.
similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/
Is there a way using the formatter function to set this value?
plotOptions: {
bar: {
dataLabels: {
formatter: function() {
this.series.options.dataLabels.x = ?????????????
return this.y;
},
The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.
One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:
yAxis: { // The y axis is horizontal 'bar' layout
stackLabels: {
style: {
color: 'white' // Make the labels white
},
enabled: true, // Enable stack labels
verticalAlign: 'middle', // Position them vertically in the middle
align: 'left' // Align them to the left edge of the bar
}
}
You will also need to set stacking to 'normal':
Example on jsfiddle:
Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.