I've a pie chart with drilldown data and like to change the chart.options.colors. Is there a way to replace the whole color array in chart.options.colors on drilldown, and restore the old color array to chart.options.colors on drillup?
Tried to change the array in chart.options.colors and to call redraw(), but it does not work correctly.
Thank you
Torben
You can do this in a quite old fashioned way by giving the color to every point you wish to have.
in data section:
data: [24,28,{
y: 40,
color: 'red'
}, 10, 30, 40
]
here I've worked out a example : http://jsfiddle.net/tbjuq/
I hope this will help you to achieve what you are looking for.
You can replace every element of the series array
{
name: 'sampleName',
id: 'sampleId',
data: [
['subElement1', value1],
['subElement2', value2]
]
}
with
{
name: 'sampleName',
id: 'sampleId',
data: [{
name: 'subElement1',
y: value1,
color: '#123456'
},
{
name: 'subElement2',
y: value2,
color: '#123456'
}
]}
Related
I'd like to create a highcharts scatter diagram showing wind direction (y) on a time axis (x). The color of the points should be calculated using the wind speed. How could this be done? The result should look like the attached example, where red dots indicate high speed, green and yellow low speed.
One solution would be to split the data into 12 series (Beaufort 1-12) with different colors, shown in the same chart, but I would prefer to find a method to calculate the colors for each point seperately.
You can use colorAxis with dataClasses and colorKey for the series. For example:
colorAxis: {
dataClasses: [{
to: 10,
color: 'green'
}, {
to: 50,
from: 10,
color: 'yellow'
}, {
to: 100,
from: 50,
color: 'red'
}]
},
series: [{
colorKey: 'speed',
data: [{
x: 0,
y: 1,
speed: 10
}, ...],
type: 'scatter'
}]
Live demo: http://jsfiddle.net/BlackLabel/5po1Lqym/
Docs: https://www.highcharts.com/docs/maps/color-axis
API Reference: https://api.highcharts.com/highcharts/colorAxis.dataClasses
If I have a data series like this:
series: [{
name: 'Data',
keys: ['label', 'x', 'y', 'z', 'colorA', 'colorB', 'left', 'top'],
data: data
}]
I would like to change all the points color from colorA to colorB like this:
chart.series[0].setColor(data.colorB);
Data is an array and looks like this:
var data =[['Danish',0.12861975,0.13658875,0.06524175,
'#0000FF','green','https://urltoanimage',91,17]]
So, for this one point, #0000FF is used as a color. I would like to change it to green.
Entire project is here: https://jsbin.com/xumofu/
You need to update each point's color insted of series color, example:
document.getElementById('ColorA').addEventListener('click', function() {
chart.series[0].points.forEach(function(point){
point.update({ color: point.colorA }, false);
});
chart.redraw();
});
Live demo: http://jsfiddle.net/BlackLabel/bauvco71/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
Am using high charts, when am calculating the average time and plotting the pin position slightly changed. Here am attaching the screen shot, please have a look on it and help me out from this. Thank you.
Here is my series,
var data = [
{
name: 'No. of potholes',
data: seriesArray,
stack: 'North',
color: 'lightblue'
},
{
type: 'line',
name: 'Average',
data: seriesAvg,
color: 'orange',
marker: {
lineWidth: 2,
lineColor: 'orange',
fillColor: 'white'
}
},
{
name: 'KPI',
color: 'grey'
},
]
The plotting circle position has been changed:
This is caused by the grouping functionality (https://api.highcharts.com/highcharts/series.column.grouping):
When it is enabled each column series has a reserved space in every group. There're two column series in your chart. The second column series occupies half of the space in each group even though it has no data.
Set grouping to false to prevent this unwanted behavior.
I'm trying to graphic some values, I have this part, then I want to add some max and min line, I could do this creating another series and adding the min/max value that I want, the problem here is that my value series is an array of n elements so I want to know if I could create the min/max series for example just doing data: [2] and put the line in all the width of my chart. Something like this:
If there is no way to do this, just if is possible doing: data[2, 2, 2,.... n] is possible to show only the first and the last point and hide the rest of them?
Here is my working code
You can use plotLines for this.
Example:
yAxis: {
softMax: max,
min: 0,
plotLines: [{
value: min,
width: 1,
color: 'rgba(204,0,0,0.75)'
},{
value: max,
width: 1,
color: 'rgba(204,0,0,0.75)'
}]
}
Updated pen:
http://codepen.io/jlbriggs/pen/LbJQEV
Alternatively, if you really want it to be a series, you can grab the min and max x values, and provide your data as arrays of [x,y] pairs. Something like:
series: [{
name: 'Actual Series'
...
},{
name: 'Max',
data: [[xMin,yMax],[xMax,yMax]]
},{
name: 'Min',
data: [[xMin,yMin],[xMax,yMin]]
}]
I have a very simple example using Highcharts which uses "datetime" on one axis and categories on the other. It renders with no points and does not show the categories labels at all. I'm wondering now if you can't use that combination of types. Here is the code:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['p1', 'p2']
},
series: [{
type: 'scatter',
data: [
{
name: 'Deliv1',
x: Date.UTC(2011,0,1),
y: 'p1'
},
{
name: 'Deliv2',
x: Date.UTC(2012,0,1),
y: 'p2'
}
]
}]
});
The answer to my problem was given on the highcharts forum. I thought I'd report back here what the solution was. I was errantly using y: 'p1' and y: 'p2' for values on the points. The y values actually are the indexes of the categories. Here is the updated code which works:
data: [
{
name: 'Deliv1',
x: Date.UTC(2011,0,1),
y: 0
},
{
name: 'Deliv2',
x: Date.UTC(2012,0,1),
y: 1
}
]
It's possible but you'll need to pretend the y values are numeric.
Probably by having an array with the actual Y-value and a number (maybe index) then the point's y value to the number and for the y-axis settings add the label's formatter to return the actual y-value based on the value.
You'll also need to adjust the min, max, interval and if you're using tooltips add a similar formatter to get the y-value.
(If I get more time, I'll try to create an example).