The Highcharts library has a default array of colors:
http://api.highcharts.com/highcharts/colors
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
which at "initialization" can be set to whatever you want.
My question: "after initialization", how to update the color array and "redraw" the chart?
For a single series, I found I can update the color with some sophistication ...
chart.series[0].update({
color: {
radialGradient: { cx: .5, cy: .6, r: .25 },
stops: [
[0, '#ffffff'],
[1, '#73ff96']
]
}
}, true);
But the bubble chart has a "default" border and "fill" that I can't seem to duplicate.
http://www.highcharts.com/docs/chart-design-and-style/colors
So the fundamental question may be: what is the default fill/opacity setup that bubble charts using internally with the "colors" array to build a specific series "color" attribute? And what is the "color" attribute?
update
Clarification follows: Based on the #morganfree answer. Applied to a single point, the series information was right on.
Below, the // unselect reverts back to the correct color, but when applied to a single point the color goes gray, with params, not to this red "highlight"
// unselect points
var points = chart.getSelectedPoints();
if (points.length > 0) {
Highcharts.each(points, function (point) {
point.select(false);
point.update({color: '#7cb5ec'}); // default color
});
}
// select current point
if(idx != -1)
{
chart.series[0].data[idx].select(true);
chart.series[0].data[idx].update({color: '#f45b5b'},true); // highlight color
}
http://fiddle.jshell.net/mshaffer/h39e2z0o/
Note the select element goes gray, based, I believe on the default parameters within
plotOptions: {
series: {
allowPointSelect: true
},
for the "marker"
http://api.highcharts.com/highcharts/plotOptions.series.marker
Does the "marker" allow for such dynamic recoloring?
Also note, if I randomize an element, then change the series color, the "randomized" element within the series does not change back to the correct color.
update 2
It appears the events for "bubble" and "series" within plotOptions are conflicting? click vs select?
If you want to change colors of the series after initialisation, then you have to loop through the series and update its color - the default 'feel' of the color will be preserved.
chart.series.forEach(function (series, i) {
series.update({
color: colors[colors.length - i - 1]
}, false, false);
});
chart.redraw();
example: http://fiddle.jshell.net/mp27yb75/2/
The color for a specific bubble is inherited from the series color but if you specify the color for the point, the default 'feel', again, will be preserved.
chart.series[0].data[0].update({
color: '#f45b5b'
});
example: http://fiddle.jshell.net/mp27yb75/3/
For a bubble, fill's opacity is set to 0.5, stroke's opacity is 1, stroke and fill colors are the same.
You can do this way,
chart.series[0].data[0].update({
y: 150,
marker: {
fillColor: 'red',
states: {
hover: {
fillColor: 'red',
lineColor: 'red'
}
}
}
});
DEMO
Related
I am trying to implement a waterfall chart for 1 of my projects using ApexCharts. This chart isn't available out of the box with ApexCharts. So, I'm trying to modify the range column chart into a Waterfall chart.
This is pretty much all I need but I need to change the color of the columns where the range is decreasing. Here the middle columns have a blue color, but I need to change it to red. Any leads are appreciated.
I have already checked the fill and the colors property, they don't seem to work properly with range column charts.
CodePen: https://codesandbox.io/s/apx-range-column-forked-8dv67
Thanks in advance.
The closest thing I've been able to get working is setting a fillColor for each data point in a series:
this.chartOptions = {
series: [
{
name: "blue",
data: [
{
x: "Team A",
y: [0, 100],
fillColor: "#FF0000",
},
],
},
],
}
For this to work though, you'd need to do some pre-processing before you add the data points to the series. You would need a function to check if the range is negative and if so sets the color to red.
function barColor(dataPoint1, dataPoint2) {
return (dataPoint1 - dataPoint2) < 0 ? "" : "#FF0000";
}
There's a code Sandbox showing the fillColor in use.
I want to change the colour of the crosshair depending on the value. I am doing this, but it isn't working.
xAxis: {
type: 'datetime',
crosshair: {
threshold: 1,
negativeColor: 'green',
color: 'red',
width: 1.5,
snap: false
}
So i wanted the color of the crosshair to be green if the value of the y-axis is less than 1. But it isnt working. any help is appreciated.
The options which you have tried to set doesn't exist in the API - https://api.highcharts.com/highcharts/xAxis.crosshair.color
I think that the easiest way to achieve it is by using the className property and changing crosshair style dynamically in the tooltip.formatter callback.
Demo: https://jsfiddle.net/BlackLabel/be9jqh6s/
tooltip: {
formatter(tooltip) {
let chart = this.series.chart,
crosshair = document.getElementsByClassName('custom-crosshair');
if (crosshair[0]) {
if (this.x > 4) {
crosshair[0].style.stroke = 'green'
} else {
crosshair[0].style.stroke = '#cccccc'
}
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
I'm trying to draw a straight dashed line across my linear chart at zero.
I got it to work by drawing another series with all the points on the y axis at 0 and it works ok but I would like to change the style to 'Dash' and also remove the annoying series name it adds to the legend by default. I don't want it to appear in the legend. I tried setting name to '' for this part.
var zeroSerie = {
data: firstSeries,
dashstyle: 'Dash'
};
zeroSeries.name = '';
soarChart.addSeries(zeroSerie, false)
I would also very much like to set the colour to red and 'stroke-width': 2,
Thanks for any help
I think that is better to use the plotLines option:
yAxis: {
plotLines: [{
value: 0,
color: 'red',
zIndex: 2,
dashStyle: 'dash'
}]
}
Live demo: http://jsfiddle.net/BlackLabel/zan69hm7/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
I have kendo-chart at my js code.
By default, the legend area layout is that, there is list of colors, and the right of every color - there is label with series name. I want to reverse the order: put label first, and color second, and align it to right.
I think the best way to do it is by legend.item, but I don't know how to do it.
see the current state:
and here is demo of what I want will be:
You can create a custom legend visual using the Kendo legend methods.
legend: {
item: {
visual: function (e) {
// get the default color for the legend shape
var color = e.options.markers.background;
// get the default color for the legend text
var labelColor = e.options.labels.color;
// bounds of the legend
var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
// Recreate the legend shape (can be any shape)
var marker = new kendo.drawing.Path({
fill: {
color: color
}
}).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close();
// recreate the label text
var label = new kendo.drawing.Text(e.series.name, [0, 0], {
fill: {
color: labelColor
}
});
// This is the key part: it draws the label first then the shape
layout.append(label, marker);
layout.reflow()
return layout;
}
}
The important part of this code is this part:
layout.append(label, marker);
Because we're specifying the label first, then the marker, the label should appear first.
I don't have a jsFiddle setup for this, but Kendo has an example in their dojo: http://dojo.telerik.com/OdiNi
In this case you'll have hide the legend.
legend: {
visible: false
},
And create your own legend in html.
I want to change the background color of a Highcharts Highstock chart on pressing a button. If the BG color is white by default, I wanna change it to some gradient filling. Otherwise it should be white. So there should be a switch between two color options basically.
As posted in another thread (Changing HighCharts background color?), I already know how to change the BG color. My problem is to distinguish the actual color in the chart in order to use an if statement.
My code looks like this:
var gradient = {
linearGradient: [0, 0, 0, 400],
stops: [ [0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)'] ]
};
if( chart.backgroundColor == 'FFFFFF' )
{
console.log('if white');
chart.chartBackground.attr({
fill:gradient
});
}
else
{
console.log('else');
chart.chartBackground.attr({
fill: '000000'
});
}
In my case there will be always called the else statement. So I think there should be another property than chart.backgroundColor, I also tried chart.chartBackground.
Any idea how to access the background color property of the chart? Thx a lot!
You should check chart.chartBackground.fill value.
http://jsfiddle.net/ewLjj/1/
or chart.options.chart.backgroundColor
In both examples, value will be true.