I have an overlapping column chart and I am trying to display the columns in ascending order.
Here is the graph:
First Image
Second Image
For example for 01/11, first display the red bar then the blue and finally the black so that the smallest bar is always in the foreground and visible
Second example :
http://jsfiddle.net/garrickcheung/67BkD/19/
Want to see the min value in the foreground
plotOptions: {
column: {
grouping: false
}
},
Do you have any idea for do this ?
Related
I am trying to implement accessibility(keyboard navigation on hover state). When I hover the plot band I can see the tooltip values as given by moverover event. But when I tab into it I can see that the borders are highlighted but no data of hover state(ie.the tooltip) is shown. I have attached fiddle for the same.
events: {
mouseover() {
/* Show usage number on hover for first plot band */
this.label.element.innerHTML = 'RED'
},
mouseout() {
this.label.element.innerHTML = '';
}
}
PS: I have even added zIndex to the plotbands and fill-opacity:0 for the series.
Any help?
https://jsfiddle.net/Delfin_/bad9hfzt/85/
I'm currently using a bar graph to display my data. In this div, my bar graph is sitting at 50% width. If the percentage of the bar is too large for the width, the text next to the bar that displays the percentage such as 10% shows in the bar graph itself. Which is fine, but with the using the same color css as the bar graph. In this situation it is hard to read the percentage.
I would like the percentage to use the same color as the bar graph but Is it possible to change the text to white only when this happens?
Here is a photo example:
Here is a code snippet of what i'm using to change the color of the text using plotOptions
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return ` <span style="color:${this.color};">${this.y} %</span>`;
}
}
}
},
Here is a link to my jsfiddle where the issue is re-created: https://jsfiddle.net/8g4uL0jm/22/
I think that a better idea will be to change the dataLabels color after their initializing, which gives us information about their positions.
Demo: https://jsfiddle.net/BlackLabel/af02bgs7/
events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align !== "right") {
p.dataLabel.css({
color: p.color
})
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, 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.
I have a problem with Highcharts, when trying to position the x-Axis tick marks according to the column data shown. I want to align the x-axis ticks on the right, but all the time they are displayed on the center. X-axis must be numbers, so I don't have categories.
Fiddle here
Experiment with the pointPlacement option.
For instance:
plotOptions: {
column: {
pointPlacement: -0.5
}
}
Produces (fiddle here):
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.