HighCharts 5 introduced the ability to use a theme for styling rather than setting it with javascript. I'm in the process of migrating all styles into sass, but I haven't found a way to set the marginLeft / marginRight property for a chart.
Pre v5, you would set the margin like this:
$('#chart').highcharts({
chart : {
marginLeft :29,
marginRight: 16
}
...
});
I want to remove the styling, and migrate it to a sass file. I'm not sure which class name I need to hook onto, since nothing I've tried has worked thus far. I'm new to working with svgs, what am I missing?
#chart {
margin-left: 29px;
margin-right: 16px;
}
In a Highcharts styled mode you can style elements with properties which are supported in SVG. SVG does not support padding or margin attributes - instead you need to manually calculate spacing and include that information in element's x, y attributes (or transform, etc.) and this is what Highcharts does.
Related
I'm trying to set a specific line width on a line series, in a chart which has styledMode switched on. (Styled mode is necessary for us, to eliminate in-line styles which are causing Content-Security-Policy errors.)
I find that the stroke color from my style is correctly applied to the line, but the stroke-width setting is ignored, even if I mark it as !important.
Jsfiddle: http://jsfiddle.net/tsjLg95w/
You can edit the stroke value to prove that the style is being applied.
The stroke is actually applied on a child path with the highcharts-graph class, which has a default stroke-width of 2px. Overriding the stroke-width on that class instead works (so your selector is .series0Line .highcharts-graph):
.series0Line .highcharts-graph {
stroke-width: 30px;
stroke: red;
}
JSFiddle: http://jsfiddle.net/7z8jx1y3/
I've just updated from Highcharts V6.1.1 to the latest (V7.1.2) and now I have an issue where charts are not correctly scaled width wise when contained in a css transform scale.
The JSFiddle below shows the problem (apologies for the small images, they're scaled to show the problem).
Using V6.1.1 (uncomment in fiddle) works correctly;
Whereas using latest, V7.1.2, the chart does not fill the container;
https://jsfiddle.net/mattscotty/L4fo02uk/
#outerContainer {
transform: scale(0.315395);
transform-origin: left top;
}
That issue is a Highcharts bug reported here: https://github.com/highcharts/highcharts/issues/10782
As a workaround, set chart.width property to the same value as the container width:
chart: {
width: 800
}
Live demo: https://jsfiddle.net/BlackLabel/wtf75o9s/
API Reference: https://api.highcharts.com/highcharts/chart.width
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!
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/
I would like to know the exact size of an element without margin, border and padding, just the width and height of the most inner box (see image below).
Currently i'm aware of the function "getBoundingClientRect" which gives the size including border and padding. There is also the "client" property which returns a Rect including the padding.
So the question is, how do i get the width and height without padding?
Unfortunately the DOM does not provide such functionality. That's why most libraries like jQuery, ExtJS, etc. provide helper methods. They essentially parse the style and figure it out.
Here's an example:
<div style="width: 100px; height: 100px; padding: 5px; border: 1px solid #000"></div>
int getWidth(Element element) {
var paddingLeft = element.style.paddingLeft.replaceAll('px', ''); // You may want to deal with different units.
var paddingRight = element.style.paddingLeft.replaceAll('px', '');
return element.clientWidth - int.parse(paddingLeft) - int.parse(paddingRight);
}
And the usage:
print(getWidth(query('#test')));
Result:
100
Notes:
You might consider dealing with different types of units (px, pt, em, ...).
The box-sizing property also has an effect you might want to check for.
If I or you happen to find the time, perhaps release a Pub package or something. :)
This pub package can predict the size of a text (without margin, border and padding) that does not yet exist in the DOM: https://pub.dartlang.org/packages/textent
Try the relatively recently introduced Element.contentEdge, that seems to be exactly what you want.
This comment from a Google employee lists some more related methods that has also been added. Note that at least some of them are still marked as Experimental in the API docs, but they can be useful nonetheless.