I am converting all the charts in an application to Highcharts 5.x styled mode.
I cannot find how to make the solidgauge stops work in styled mode. When I inspect the SVG, I do not see any class for the colors.
I couldn't find any solidgauge stops example with styled mode.
Anyone can post a working example?
In a solid gauge series color is calculated dynamically based on stop values - currently, I do not think you can do the same with only css. The point fill atribute is calculated and set correctly but in this case css class takes precedence and the point's color has a fixed fill taken from the css file (highcharts-color-{n} class).
Keep stops in options and remove class from the point (or set colorIndex to a non existing number, e.g. 99)
.highcharts-color-0 {
fill: #7cb5ec; //remove fill attribute
stroke: #7cb5ec;
}
or:
data: [{y: 80, colorIndex: 99}], // the point's class will highcharts-color-99 now
example: http://jsfiddle.net/gj8zfw73/
Related
I am following the code example of this jsFiddle in order to draw an additional table into the Highcharts SVG, so that it can be exported into an image when the chart is exported.
I am able to draw the table I want, but when I export, my extra table is not part of the image, it just shows the chart as if I had not done any of the extra drawing.
This is important to note, I think, because as in the example jsFiddle, I leave the legend in its default state (horizontal, centered), with a negative y value in order to trick Highcharts into extending the SVG area below the chart to leave room for the table. But then, as part of the process where I draw my table, I move the individual legend elements by changing their tranform: translate() values.
However, when I try to export the chart to an image, in the image the legend is back to being horizontal and centered below the chart, which indicates to me that Highcharts in not actually reading the "live" SVG information, but instead rendering some sort of cached version, or something?
I am using offline exporting, is this behavior a result of that?
I am also using highcharts-react-official, and I have my imports and setup like this:
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Exporting from 'highcharts/modules/exporting';
import OfflineExporting from 'highcharts/modules/offline-exporting';
Exporting(Highcharts);
OfflineExporting(Highcharts);
export default class MyChart extends Component {
// etc
}
Is this behavior something to do with using highcharts-react-official?
As suggested in the comments, I tried using marginBottom instead of a negative Y value for the legend in order to make space for the table at the bottom of the SVG, but that did not change anything, the table was still not exported.
Here's how my component is set up. I tried to include all the different stages it goes through as it receives and processes the data before actually putting it into the chart:
https://codesandbox.io/s/w7m53k6p37
Is there any way to update the color of a single point in a grouped data set? I can't seem to find a way to reliably set the colors.
A fiddle can be found here demonstrating the issue.
Points are grouped during the rendering process of the chart so they cannot be specifically targeted via constructor options (because we don't know which points will be generated by Highcharts algorithms).
What is more, Higcharts doesn't allow performing update function on the grouped point.
As a workaround your can change the CSS of point's SVG element:
chart.series[0].groupedData[0].graphic.css({
color: 'red'
});
Live demo: http://jsfiddle.net/BlackLabel/9ey2yq3u/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
I am using the latest version of highstock.js (v5.0.14) and my custom styles (using CSS) are being usurped by inline fill attributes.
For example, this CSS:
.highcharts-color-0 {
fill: #2b908f;
stroke: #2b908f;
}
Is being overwritten by this HTML attribute:
<path fill="rgba(124,181,236,0.75)" ... />
I am looking to disable the fill attribute. Using !important does not work.
This problem came after I upgraded to v5.0.14 (previously using v5.0.9 where the "fill" attribute was not in use)
A more effective and durable way to change the default colors Highstock uses is by calling the function Highcharts.setOptions() (see http://api.highcharts.com/highstock/Highcharts.setOptions) and defining the colors there.
For example, you could do define your own colors as follows:
Highcharts.setOptions({
colors: [
'blue', /* first color chosen */
'red', /* second color chosen */
'#2b908f' /* third color chosen */
]
});
In this code, colors is an array of values.
Highstock will cycle through this array and use them for each series that is drawn on the chart. Using this example, the first series will plot with a fill color of blue, the second with red, and the third with the hex value #2b908f.
Place this code before you define your chart options so that it will inherit what you set.
I hope this helps!
Using the Highcharts example posted here how can you ensure that the Font Awesome icons will be positioned exactly in the middle of the data point like the native symbols/markers are? It gets called like this in the data series and uses the "plugin" that is found in that same Fiddle:
marker: {
symbol: 'text:\uf183' // fa-male
}
Using that example, if you toggle the series on/off a couple of times or zoom in/out the icons are no longer visually accurate, often displaying above the actual coordinate. In the image below you'd believe that data point had a value >50 based on where the icon is.
Their SVGRenderer example here doesn't seem to be effected.
It looks like problem with re-rendering icons later - height of the marker isn't considered. I suggest to change a bit logic for rendering icon:
var text = symbol.split(':')[1],
svgElem = this.text(text, x, y)
.attr({
translateY: h, // translate marker
translateX: -1
})
.css({
fontFamily: 'FontAwesome',
fontSize: h * 2
});
See demo: http://jsfiddle.net/2A7Zf/29/
If you want to use the markers XL-sized (i.e larger radius) for a custom chart (e.g. a Yes/No prevalence chart using the x and check icons, circle empty for the less prevalent one and circle filled for the more prevalent one and data labels showing counts/%s), then I'd recommend this tweak to center the symbols:
translateX: -w/2 + options.radius/4 - 3
I've upgraded from highcharts 3.0.5 to 3.0.7 and with that change came the dataLabels overflow:justify property that is set to justify the dataLabels (see this fiddle for an example). This will just slide labels that fall outside of the chart into the bar, but the color doesn't change and there doesn't appear to be an option to change the color. Is there A) any way to force the label to appear beside the bar and readjust the size of the bars, or B) any way to change the color when overflow: justify kicks into play?
The only "fix" that immediately comes to mind is to provide some maxPadding, but that feels a bit hacky.
instead you can use the property
overflow: 'none',
crop: false
here is the API reference
I hope this will help you
I ran into the same thing and came up with a solution that appears to work for my scenario.
After rendering the chart, I look through the series for dataLabels that have been right-aligned, then change them to white using jQuery.
// snipped: rendering the chart
var chart = $('#chartContainer').highcharts(),
labels = $('#chartContainer').find(".highcharts-data-labels tspan"),
indexesNeedingWhite = [];
$.each(chart.series[0].data, function (index, data) {
if (data.dataLabel.alignOptions.align === "right") {
indexesNeedingWhite.push(index);
}
});
// find the exact text label within this container
// and change the fill to white
$.each(indexesNeedingWhite, function (i, index) {
$(labels[index]).css('fill', 'white');
});