I've created an HTML5 (highchart) column chart in Jaspersoft Studio but the xAxis labels can be quite long and are overlapping with the legend which look awful. Company standards dictate that the legend must be at the bottom, and labels rotated 270 degrees so they are vertically. Which means I can't move the legend or rotate the labels unfortunately, so I would like to make so the label just cuts off after a certain length and is only partially displayed to prevent it overlapping with the legend when it's too long.
This page has a list of all the properties that can be applied to the xAxis labels:
http://api.highcharts.com/highcharts/xAxis.labels
I've tried using the Overflow property listed there but that only seem to relate to labels inside the plot area ie:
xAxis
labels
overflow:false
So does anyone know of a way I can limit the length of the xAxis label to prevent it from overlapping the legend beneath it?
I know nothing about jaspersoft-studio. So, I'm not sure this will work in your situation.
But, with straight HighCharts, you can turn on useHTML for the lables and then set the label width in css.
Javascript:
Highcharts.chart('container', {
chart: {
marginBottom: 80
},
xAxis: {
categories: ['Long name 1', 'longer name number 2', 'this one is really really really long', 'Kinda long, but not longest', 'short', 'long name that is long', 'I think you get the point', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
rotation: 45,
useHTML:true
}
},
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]
}]
});
CSS:
.highcharts-axis-labels span{
width:30px;
}
http://jsfiddle.net/0jwf9nb6/1/
Go to Chart Properties > Show Advanced Properties and add a new property xAxis.labels.format and set this to use an expression with the property value
('My Text').substring(0, 5)
Swap out 'My text' for your $V{} or $F{} or any other value you are using as your xAxis labels as appropriate, and limit the substring to the best fit for your chart.
Alternatively add this straight to the chart settings in via the Source editor by adding the code below
<hc:chartSetting name="default"> e.g.:
<hc:chartProperty name="xAxis.labels.format">
<hc:propertyExpression><![CDATA[('My Text').substring(0, 5)]]></hc:propertyExpression>
</hc:chartProperty>
Related
After updating Highcharts to newer versions (e.g. 9.0.0+/10.3.2), min value for yAxis for area chart is always set to 0 and for large values the chart looks like stright line without extremes. For line chart type, chart looks ok.
Please see example - https://stackblitz.com/edit/angular14-standaone-components-highcharts-vwctmh?file=src%2Fapp%2Fapp.component.ts
On version 7.2.2 for area chart, min value was automatically calculated based on input data.
Is it a bug?
How can I set options to force min value to be automatically calculated?
You need to set threshold property to null.
From Highcharts API:
threshold: number, null
The Y axis value to serve as the base for the area, for distinguishing
between values above and below a threshold. The area between the graph
and the threshold is filled.
If a number is given, the Y axis will scale to the threshold.
If null, the scaling behaves like a line series with fill between the graph and the Y axis minimum.
If Infinity or -Infinity, the area between the graph and the corresponding Y axis extreme is filled (since v6.1.0).
Defaults to 0.
series: [{
...,
threshold: null
}]
Discussion about softThreshold: https://github.com/highcharts/highcharts/issues/15061
Live demo: http://jsfiddle.net/BlackLabel/9cnmxqks/
API Reference: https://api.highcharts.com/highcharts/series.area.threshold
Area chart with softThreshold on Highcharts 7.2.1 has the yAxis starting point as auto-calculation value (the same as Line chart) but from 8.2.2 and higher yAxis Area chart always starts from 0
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
softThreshold: true,
data: [9990, 9150, 10640, 12920, 14400, 17600, 13560, 14850, 21640,19410, 9960, 9440]
}]
});
7.2.1 example: https://jsfiddle.net/6v7gd8m0/5/
8.2.2 example: https://jsfiddle.net/b0tz3dfq/
Does anyone know how to make yAxis of an Area chart start with auto-calculation value and not always with 0?
======================
EDIT ======================
From 8.2.2 and higher softThreshold seems to work opposite so with softThreshold set to false
Example: https://jsfiddle.net/0keanhs2/
Does anyone understands why in that case softThreshold seem to have opposite result when switching from version 7 to 8?
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
I'm using spiderChart of highCharts.js.
By default, the spider has vertical direction.
I want my spider to appear at horizontal direction.
For example, when I have only two points and the forum is only simple line, I want to see horizontal line instead of vertical.
Or when I have 6 points and the spider shape is hexagonal, I want the top os the spider to be one of the hexagonal rib, and not one of the vertex.
I attach images here for easy understanding:
Removing the pointPlacement properties inside the series object in the official demo will render chart in the horizontal direction.
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
//pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
//pointPlacement: 'on'
}],
Demo: https://jsfiddle.net/BlackLabel/95av36ms/
API: https://api.highcharts.com/highcharts/series.line.pointPlacement
I have a dynamic value for a quote. Horizontal line indicates the current position on a line chart. To move it i have to remove and add last one each time i receive new. I need to animate transition of this plotline, that's why it should not be removed and created again.
That's how it looks now:
chart.yAxis[0].removePlotLine('current-price');
chart.yAxis[0].addPlotLine({
value: parsedData.quote,
color: 'black',
width: 0.5,
id: 'current-price',
useHTML:true
},
zIndex:100
});
you can update the options directly and then update the axis:
var newValue = (chart.xAxis[0].options.plotLines[0].value + 1) % 10;
chart.xAxis[0].options.plotLines[0].value = newValue;
chart.xAxis[0].update();
fiddle: https://jsfiddle.net/aviram26/v8xte4hL/
we've all probably seen the following page(s), they dont really contain an answer.
https://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
https://api.highcharts.com/highcharts/xAxis.plotLines
#Aviram had a good solution, but my example contains a lot more data , which causes slow redraws.
Ive found that the update() call does a redraw/rerender in some cases (source link), which can be very expensive and slow for large plots. i used the following code to update just the plot line, and it seems to update the plot line very quick. The reason i update plotLines and plotLinesAndBands, as in some cases when you redraw the lines/axis things need to match.
[chart].xAxis[0].options.plotLines[0].value = newVal;
[chart].xAxis[0].plotLinesAndBands[0].options.value = newVal;
[chart].xAxis[0].plotLinesAndBands[0].render();
The render function used above is called on redraw anyway (source link), so were not doing anything crazy here!
Update: The solution below is best suited for Highcharts. During subsequent comments and clarification, I learned the original poster is using Highstock, which does not support the scatter plot type. I was not successful in adapting this solution to their code, which was an areaspline chart using data points updated in real time.
Rather than using a plot line, I'd suggest creating a new series that will serve as your line. That way, you can update the series as needed and it will pick up the native animations that Highcharts provides.
Here's a working example using a basic line chart: http://jsfiddle.net/brightmatrix/ws3e1wns/
Below is the code for the new series, which uses the scatter type. Note that I've disabled the markers, added a line width, and set showInLegend and enableMouseTracking to false so it won't be seen by your users as a "true" data series.
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]
}, {
// scatter plot line to serve as moveable plot line
type: 'scatter',
data: [[0,10],[11,10]],
lineWidth: 1,
marker: {
enabled: false // hide the markers (to show only the line)
},
showInLegend: false, // hide in legend
enableMouseTracking: false // prevent user from interacting with this line
}]
Whenever you click the button in this fiddle, it will move the new series line up 10 points on the y-axis. To do so, I update both ends of the line:
// button handler
var chart = $('#container').highcharts(),
y = 30;
$('#button').click(function () {
y += 10;
// update both ends of the scatter line
chart.series[1].data[0].update([0,y]);
chart.series[1].data[1].update([11,y]);
});
As you can see, the line animates when it is moved.
I hope this is helpful and useful for you!
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]