I have a columnrange series in my highchart, and I want to be able to set a specific color for each range in a series. As long as I just used one color, this worked fine:
data: [[1, 5, 10], [2, 10, 20]]
Here the first value in each list is the X and the next two is the start and the end of the Y range. In order to have a separate color for each range I figured I needed to use the "object notation" instead of the array notation, so I tried this:
data: [{
x: 1,
y: [5,10],
fillColor: "red"
},{
x: 2,
y: [10,20],
fillColor: "blue"
}]
This did however not work (got invalid values). I cannot see that this case is covered by the API doc: http://api.highcharts.com/highcharts#series.data
Does anyone know how I can have ranges (two Y values) with the object notation, or if there is another way I can color the ranges differently? PS: My Y values are actually date ranges, but I just simplified it for the example above.
Edit: Here is a jsfiddle showing what I try to achieve: http://jsfiddle.net/Q2JMF/1/ . If you change the type to "column", and change the y-values to just single integers, you see that it works fine. But with columnrange I cannot get it working.
Proper options are low and high, see: http://jsfiddle.net/Q2JMF/2/
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
}, {
x: 2,
low: 6,
high: 7,
color: "blue"
}]
Related
I am trying to create a line chart using using two separate arrays pulled from a json file to make one one.
Here is what my json file looks like
{
"time": [1240, 1250, 1300, 1310],
"volt": [12.218, 13, 12, 14]
}
Here is the code I thought would work
https://codesandbox.io/s/boring-elbakyan-bj7gg?file=/data.json
which uses
data: {
x: jsonData.time,
y: jsonData.volt,
},
which seemed to make sense to me but isn't working
This works but the time stamps are not displaying current times or doesn't display at all
https://codesandbox.io/s/awesome-hamilton-kkrgt?file=/index.js
Any help is greatly appreciated!!
You need to map your data to the format required by Highcharts. In your case:
an array of arrays with [x, y] values:
series: [{
data: jsonData2.time.map((x, index) => [x, jsonData2.volt[index]])
}]
or an array of objects with { x, y } values:
series: [{
data: jsonData2.time.map((x, index) => ({ x: x, y: jsonData2.volt[index]}))
}]
Live demo: https://codesandbox.io/s/fancy-cloud-mx9z-mx9ze?file=/index.js
API Reference: https://api.highcharts.com/highcharts/series.line.data
I have a line graph which can drop down in a straight line. e.g. I have a point at (1, 100) then a point at (1,0). However, highcharts (https://www.highcharts.com/) will only display information for one of the points. Is it possible to get it to show information on both points when I hover over each of them?
The default for line type series is findNearestPoint: 'x' https://api.highcharts.com/highcharts/plotOptions.line.findNearestPointBy .
If you change that to findNearestPoint: 'xy', you'll get the behavior you want.
Highcharts.chart('container', {
series: [{
findNearestPointBy:'xy',
data: [
[0, 29.9],
[1, 50],
[1, 71.5],
[3, 106.4]
]
}]
});
http://jsfiddle.net/vt1cep0L/2/
I would like to generate a report using highcharts with extjs. I have tried out the sample http://jsfiddle.net/6qsvjark/2/.
series: [{
name: 'Data',
data: [{
x: 0,
low: 7,
high: 8
},{
x: 0,
low: 8.1,
high: 9,
color: "#202020"
},{
x: 1,
low: 6.5,
high: 7.5
},{
x: 1,
low: 7.5,
high: 8.5,
color: "#202020"
}]
}]
Is it possible to customize the size/shape (eg.,rounded edges) of bars in columnrange type of highcharts? Also, is it possible to place a symbol between 2 data in series? Please refer the image
symbol between two data (with same 'x' point) in a series
You can do quite a bit of customization to highcharts. However achieving these effects often means somewhat pushing the limit of what different customization options were meant to be used for and adding some hard-codded items, hence making your chart less portable for different sizes. It will probably cost some extra time and effort to make it work well.
As a starting point you can use the following sample:
http://jsfiddle.net/c96qy0qa/
Here I use borderRadius to round the corners, and custom label for the 3rd (middle) series to display an icon in between other two series. Also I use series shown in the middle to overlap the other two, in order to hide the rouded corners in the middle.
series: [{
name: 'Male',
borderRadius:20,
data: [-2.2, -2.2]
},{
name: 'Female',
borderRadius:20,
data: [2.1, 3.0 ]
}, {
name: 'blah',
borderWidth:30,
borderRadius:10,
borderColor:"#ffffff",
dataLabels:{
enabled:true,
useHTML:true,
crop:false,
formatter:function(){ return "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwJCBoDRV/pcAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABkklEQVRo3u1aQRKDMAgsTI4+xP+/xod4p6fOdNqoARZInXpsY8jCAhsTEpHHHR5+3OS5DZB29ifttKENyiJrBBA6ypEIEJHAyqlFO20Ip7VZON4Do4kWZ3PZC06dI55Je07w0ufKsUNAvCCQxeRo/ksgIwY9NLQA6tlrlSB671sjZe4jEcXAQ2GubIYem5/j+RdB9JopZxuPyEPaafvKEe0CrbliAXD2DlfQCN1DhoGgKhSisR79zt6JRxaniYIsslocx9GejpA3vXGM4qiX+176ckQya9RByA4Rpa1GooOWOGylwmwfIDh7MVE7T/YY1i4qsh+5k12zOIQ+O5oDUrWywEyltaw952p8eGdHABoZ0zIXfjafR8vJImuLBiGLrBbg2obKkbx+GRuRIlppo6YW6ruTJzrQ/QiqFGsio6Li+54d6f3MSH9FJFNyoG2li8YoW2UnVpo9vEn9ao4FPB0d7ZiG9iyyKqnEaPWpLqwKok+sqooHae+izHqJgCuMhmx/UbeDMlVBKJDq53/NabbnCakwWb7DRriDAAAAAElFTkSuQmCC'>"; },
x:0
},
data: [0.3, 0.3]
}]
I am trying to achieve two things:
Apply a green or red color based on the data point of a column chart in highcharts. Lets say if column is above 50, border is green else red.
I want to place a icon (if icon not possible, at least a text) inside few chart based on if they have some property.
I am trying to do following:
plotOptions:{
column:{
borderColor: this.y > 50 ? 'green' : console.log(this),
dataLabels: {
format: this.prop : 'i': '', //will put 'i' as icon
enabled: true,
align: 'top',
color: '#fff',
inside: true
}
},
},
My bar chart series is :
series: [{
name: 'Defect per sprint',
data: [0, 0, 0, 2, 10, 2, 5, 3]
}]
If I keep borderColor with series it gets applied to all columns
But it seems plotOptions is not supplied the 'this' instance. So the above code doesn't work. How can I achieve the above ??
I would do this by preprocessing the data.
You can loop through the data array and check for any value, and apply any level of formatting accordingly.
Example:
var data = [1, 2, 3, 5, 9, 8, 7, 4, 5, 6, 9, 7, 5, 3, 6, 9, 7, 5, 9],
processedData = [];
$.each(data, function(i, point) {
processedData.push(
(
point < 6 ? {
"y": point,
"color": "rgba(204,0,0,0.75)",
"dataLabels": {
"enabled": true
}
} : point
)
)
});
This loops through an array, checks for a value of less than 6 - if found, it applies a different color to the point, and enables the data label, otherwise, it just adds the point as a single value, and the chart config determines its color and other properties.
In the chart config, you specify the details of the dataLabels properties, and set enabled: false, so that they are only used for the points that you've enabled them for.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/178/
Output:
1) I'm not aware of a way to do this on chart creation. You can, though, loop over the series array after creating your chart to update each column's border color. Inside your loop, you'd use the update method after checking if the column value is above 50. Sample below:
chart.series[i].update({borderColor: '#00FF00'})
2) I haven't used Highcharts for some time now but the following used to work: instead of format, define a formatter function.
dataLabels: {
formatter: function () {return this.prop ? 'i' : ''}, //will put 'i' as icon
...
}
I have some special need regarding the introductory animation of my Shield UI JavaScript chart. Using the property
applyAnimation: {
duration: 1000
},
I need to be able to set different delay times for all of the bars in my chart. For instance the first bar to show in for 1000 milliseconds, the second one faster and so on. I looked in the documentation and couldn’t find anything similar.
The applyAnimation property can be used in two ways- applied to the whole chart and all it’s series, or per data series. In this respect you may achieve a similar to the desired behavior by specifying a different show delay time (shall there be more than one data series, of course). To do so you may use code like this one:
dataSeries: [
{
seriesType: 'bar',
applyAnimation: {
duration: 1000
},
data: [
1, 3, 4, 5, 1, 3, 4, 5, 1, 3, 4, 5
]
},
{
seriesType: 'bar',
applyAnimation: {
duration: 2000
},
data: [
5, 1, 3, 4, 5, 1, 3, 4, 5, 1, 3, 4
]
}
]
The data series is he smallest scope of the property’s application. In other words it can’t be applied for a single bar for instance.