my issue is that I need to style 1 Box (Box=Task Box, background is stylebar with Color:) with 2 Colors.
So for example a task is done 20%, the normal box is yellow. But 20% should be a darker yellow to indicate that the task is 20% complete. Is there any possible way to do this very smoothly.
Thanks in advance
Juli.w
(And Im sry for my bad english, I’m German :))
You can define the color as a Highcharts.GradientColorObject to achieve the wanted result:
nodes: [..., {
...,
color: {
linearGradient: {
x1: 0,
x2: 1,
y1: 0,
y2: 0
},
stops: [
[0, '#fffdaa'], // start
[0.25, '#fffdaa'],
[0.25, '#878300'],
[1, '#878300'] // end
]
}
}
]
Live demo: https://jsfiddle.net/BlackLabel/r6qxgLtm/
API Reference: https://api.highcharts.com/class-reference/Highcharts.GradientColorObject
Related
I'm exploring Highcharts and it seems like a very comprehensive package! I have a question regarding legend colors.
I notice that when I use a linear color gradient for a line, the color next to the legend (I believe it's called the symbolColor) may or may not show up, depending on the format I use:
1) symbolColor works fine: linearGradient: [ 00, 00, 00, 350 ]
2) symbolColor doesn't show up: linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }
I'd rather use the second format; it's easier and the first is not responsive.
Should the symbolColor always show up and this is an obscure issue/bug? Or am I doing something wrong? I also just noticed that if the marker is enabled in the plotOptions for series, symbolColor works fine with the second format. But I have many data points and don't want to use markers.
The fiddle graph has two lines -- purple and green -- and while the purple symbolColor using method (1) looks fine, you'll notice that the green symbolColor using method (2) doesn't show up.
https://jsfiddle.net/jwinkle/s6d9ah17/6/
In your HTML file, add:
<script src="https://code.highcharts.com/maps/modules/map.src.js"></script>
Above your chart code add:
Highcharts.addEvent(Highcharts.Chart.prototype, 'render', function() {
this.series.forEach(function(series) {
if (series.legendLine) {
var pathDef = series.legendLine.attr('d').split(' ');
pathDef[5] = parseFloat(pathDef[2]) + 0.0001;
series.legendLine.attr({
d: pathDef
});
}
})
});
The fix is in adding a smidge to your path definition (you can test this by going into the svg path element in dev tools and changing the last number in the 'd' attribute to a float:
<path fill="none" d="M 0 11 L 16 11" ... ></path>
becomes:
<path fill="none" d="M 0 11 L 16 11.1" ... ></path>
The function above goes through each series and massages the line data adding the fractional value in the right place. Total hack. However why the line does not appear if it does have this fractional value, I don't know. I would also test this across browsers to see that it works consistently as it may not (I tested in Chrome).
Here is a somewhat related issue where I cribbed the fix: https://www.highcharts.com/forum/viewtopic.php?t=38588
(Most of it is addressing a completely different problem, but the legend lines did show up so I investigated why).
If you don't want to use the extra library, you could probably write a native js function to find the legend lines and manipulate them in the same way.
Here, you can find a nice explanation of the problem.
The difference results from the fact that Highcharts uses 'userSpaceOnUse' as a default value for gradientUnits if a gradient is defined as an array.
Highcharts source code:
// Keep < 2.2 kompatibility
if (isArray(gradAttr)) {
(colorOptions as any)[gradName] = gradAttr = {
x1: gradAttr[0] as number,
y1: gradAttr[1] as number,
x2: gradAttr[2] as number,
y2: gradAttr[3] as number,
gradientUnits: 'userSpaceOnUse'
};
}
As a possible solution, you can set gradientUnits also for linearGradient defined as an object:
color: {
linearGradient: {
...,
gradientUnits: 'userSpaceOnUse'
},
...
}
Live demo: http://jsfiddle.net/BlackLabel/yz6sagxj/
Or modify the paths very slightly so that they are not perfectly horizontal
chart: {
events: {
render: function() {
this.series.forEach(function(series) {
if (series.legendLine) {
var pathDef = series.legendLine.attr('d').split(' ');
pathDef[5] = parseFloat(pathDef[2]) + 0.0001;
series.legendLine.attr({
d: pathDef
});
}
})
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/L1kzg0cn/
Github thread: https://github.com/highcharts/highcharts/issues/1936
In addition to #Katharine's solution, here's another I discovered.
If I enable the marker in one series (setting the radius to 0) and then put the data in a second series which is linked to the previous, it works. (If I do it all in one series, there is again no legend color.)
series: [{
name: 'purple', lineWidth: 3, color: {
linearGradient: [ 00, 00, 00, 350 ],
//linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
stops: [
[0, 'purple'], // start
[1, 'black'] // end
],
},
data: [ 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, 40, ],
},{
marker: {
enabled: true,
radius: 0,
},
name: 'green', color: 'green', lineWidth: 3,
},{
linkedTo: ':previous',
lineWidth: 3, color: {
//linearGradient: [ 00, 00, 00, 350 ],
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1, },
stops: [
[0, 'green'], // start
[1, 'black'] // end
],
},
data: [ 100, 100, 95, 80, 60, 35, 50, 20, 10, 3, 2, 30, ],
}],
Here's the "fixed" fiddle: https://jsfiddle.net/jwinkle/wztq78n1/6/
I reported the original issue as a possible bug to Highcharts, and they confirmed that it's an SVG rendering problem out of their control.
Attempting to create a second level of data in the xrange charttype of highcharts does not behave as expected
see jsfiddle https://jsfiddle.net/bo8eL42v/10/ and highcharts documentation https://api.highcharts.com/highcharts/series.xrange.data.drilldown
BACKGROUND - IDEAL BEHAVIOR:
upon clicking on a series the chart is redrawn w/ that same series broken down into time buckets (Day || Week) as the categories
-- this would allow for a Day over Day / Week over Week comparison rather than a Person by Person comparison
SubPar Alternate solution is to use the series.events.click to trigger a func that would overwrite the chart entirely w/ the DayOverDay behavior
Implemented a basic jsfiddle to test that conceptually drilldown should work as described
...
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2,
drilldown: 'a'
}],
...
}],
drilldown: {
series: [{
id: 'a',
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 1),
y: 0,
partialFill: 0.25
},{
x: Date.UTC(2014, 11, 1),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}]
}]
}
Expected: clicking on any of the datapoints where drilldown: 'a' should redraw the chart w/ only the points defined in the drilldown.series.'a' where 'a' is the id
Actual: nothing happens, no errors thrown
You need to include the drilldown module for the drilldown to function:
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
See this JSFiddle demonstration.
I have a heatmap in Highcharts where the value range is from -1 to 100. My low value color is #FF0000, which I expect to be mapped to the value of -1. Instead, highcharts seems to be extending my color axis range so that a value of -25 would be shown as fully red, so my actual low value in the bottom left gets shown in a faint pink. I have tried specifying min and max values for the colorAxis, but it doesn't seem to do anything for me. How can I get the color axis configured such that my -1 value will be rendered as red?
Here's my existing colorAxis configuration, which doesn't seem to be doing the right thing:
colorAxis: {
stops: [
[0, '#FF0000'],
[0.25, '#FFFFFF'],
[0.5, '#00FF00'],
[0.75, '#FFFFFF'],
[1, '#0000FF']
],
min: -1,
max: 100
}
Here's a fiddle showing this: https://jsfiddle.net/cfarmerga/cLncce08/9/
In the below screenshot, for some reason the cursor is in the wrong place. It should be hovering over the bottom left cell in the heatmap where the value is -1.
It looks like there are startOnTick and endOnTick properties of the colorAxis that can eliminate the auto-extending axis. When I added these and set them to false, my color range is what I expect.
colorAxis: {
stops: [
[0, '#FF0000'],
[0.25, '#FFFFFF'],
[0.5, '#00FF00'],
[0.75, '#FFFFFF'],
[1, '#0000FF']
],
min: low,
max: high,
startOnTick: false,
endOnTick: false
},
The docs: https://api.highcharts.com/highmaps/colorAxis.startOnTick
Is it possible to draw lines, circles and other shapes with pdfmake? If yes, is there a documentation or are there any samples? I would like to replace jsPDF with pdfmake.
Yes, its possible. pdfmake calls them vectors. See
pdfMake Vector examples for more possibilities.
An example for drawing a line followed by a polygon:
{
canvas:
[
{
type: 'line',
x1: 40, y1: 60,
x2: 260, y2: 60,
lineWidth: 3
},
{
type: 'polyline',
lineWidth: 3,
closePath: true,
points: [{ x: 10, y: 10}, { x: 35, y: 40 }, { x: 100, y: 40 }, { x: 125, y:10 }]
}
]
}
I answered an issue in pdfMake at GitHub like this:
Create a table with layout headeronly you must define an empty body, otherwise the line would not appear:
var dd = {
content: [
{
table : {
headerRows : 1,
widths: [200],
body : [
[''],
['']
]
},
layout : 'headerLineOnly'
}
] }
The width defines the length of the line
canvas: [
{
type: 'rect',
x: 198,
y: -186,
w: 198,
h: 188,
r: 8,
lineWidth: 4,
lineColor: '#276fb8',
},
]
As far as I know, pdfmake does not provide an drawing API. Despite this, pdfmake provides you some methods to insert images at your pdf.
Best regards!
Consider the following situation:
chart.options.chart.backgroundColor= {
linearGradient: [0, 0, 0, 400],
stops: [ [0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)'] ]
};
chart.redraw():
It is all here: http://jsfiddle.net/S8f86/3/
Is it possible to change the background color of the chart with event?
You can use chart renderer and svg attribiute.
http://jsfiddle.net/S8f86/4/
this.renderer.button('Change background color', 74, 30, function(){
var gradient = {
linearGradient: [0, 0, 0, 400],
stops: [ [0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)'] ]
};
chart.chartBackground.attr({
fill:gradient
});
}).add();
Highcharts doesn't have an API call to do this. However, you can get at the underlying elements and apply some css styling to them. e.g.
chart.chartBackground.css(
{
color: '#555555',
});
http://jsfiddle.net/xzUcC/
As you are manipulating the dom directly, there is no need to call redraw() on the chart.
As mentioned by another poster, you can do graduated backgrounds as follows:
var gradient = {
linearGradient: [0, 0, 0, 400],
stops: [ [0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)'] ]
};
chart.chartBackground.attr({
fill:gradient
});