I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
Related
I want to create an area chart of multiple series with percentual stacking using Hichstock. The time series may contain gaps which I want to visualize using the gapSize option.
When I render the chart with stacking: 'percent', the gaps are not fully empty. However, there is no issue when rendered with stacking: 'normal'.
Is there any option or incompatibility that I am not aware of, or is this likely a bug in Highstock?
Here is a JSFiddle that illustrates the problem: http://jsfiddle.net/8d5qzwrg/
Could be a bug in highcharts, a workaround is to use step, like this:
plotOptions: {
series: {
stacking: 'percent',
gapSize: 1,
step: 'center'
}
},
Working JSFiddle example: http://jsfiddle.net/ewolden/0rdjL1gq/2/
Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.
I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:
`options: { ...
footer: {
display: true,
text: 'data from xy'
}
}`
I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.
EDIT/UPDATE:
I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.
Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.
`var myChart = new Chart(ctx, {
type: 'line',
data: { ... },
options: {
legend: { ... },
...
legendCallback: function(){
return '<p>bla bla</p>';
},
...
},
});
document.getElementById('legendID').innerHTML =
myChart.generateLegend();`
adding AFTER the canvas a div to append the new HTML element
<div id=legendID></div>
Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.
Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.
From the official docs:
Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.
You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.
var options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Party size',
fontColor: '#C7C7CC',
fontSize: 11
}
}
]
}
};
This requirement may sound bit weird but unfortunately It is the requirement which I have to fulfill. In Highcharts Line chart, can we hide the line and just display the points? Something like the following link: 8bdovxn4
Using the above fiddler link, I have set the line width to 0. But on hover It displays the line. Is It possible to hide the line on hover too?
Set lineWidthPlus property on hover state to 0. As an alternative, you can use scatter series type: http://jsfiddle.net/BlackLabel/0ke4or2z/
plotOptions: {
series: {
lineWidth: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/614fr8oj/
API: https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus
I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.
I am drawing a spline graph and getting a problem where in graph shows only one point on load of graph.On the other hand if I click on range selector or horizontal scroll of graph , it displays all points of graph correctly.
I tried with different data also and graph displays correctly.
Here is a fiddle to see that
$('#container').highcharts('StockChart', {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
zoomType: 'x'
}});
I did try to understand the data pattern and googled to find if there is any issue with highstock but no avail.
Looks like your graph doesn't get the initial range status correctly, as you may notice that 'All' range button is disabled when first load.
Declare a pre-selected option: selected:0 in rangeSelector would help (http://jsfiddle.net/MS63L/)
rangeSelector: {
selected:0,
buttons: [
.... rest part are same as your original code
You can change the integer according to your need: 0 select '5m', 1 select '15m', 2 select 'All'. As this attribute means The index of the button to appear pre-selected.
See also: http://api.highcharts.com/highstock#rangeSelector.selected