I'm trying to use Highcharts to create a graph similar to what's shown below. As clear, the 1st column (100%) is a sum of all others. The approach I thought of was to have invisible series below each of the individual categories to give them their raised look. The only thing that's holding me back is the thought of the situation where I might have to deal with say 30+ categories (possible in our application). Is there any simpler way to achieve the same results?
I can't post the image directly as I'm a new user. Sorry.
http://i.stack.imgur.com/RBWIf.png
I would suggest taking a look at the "low" property which is shown here:
http://fiddle.jshell.net/8JP8T/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
series: [{
data: [{
low: 1,
y: 2
}, {
low: 2,
y: 4
}, {
low: 0,
y: 4
}, {
low: 4,
y: 5
}]
}]
});
You'll still have to preprocess your data to get the correct y value and low value, but it seems doable?
For column chart, for each point you can specify the y value and the corresponding low to create a floating column.
series: [{
data: [
{y: 29.9, low: 20},
{y: 50, low: 20},
{y: 100, low: 50}
]
}]
See this example on jsfiddle.
Related
I'm trying to recreate the ECharts "Multi Title Gauge" example (a gauge with three pointers in different colors) but using a dataset rather than the gauge data values in the series.data definition. While I can get this to work for a gauge with a single pointer, I cannot get it working for the "Multi Title Gauge".
I've been able to get this to work with line, bar and pie charts.
I did read that the datasets feature, while introduced in 5.0, is not supported by all chart types.
I was encouraged when I was able to get "Gauge Basic Chart" working with a dataset. But have not been able to get "Multi Title Gauge" to work with a dataset.
The closest I have gotten to having "Multi Title Gauge" use a dataset is by using multiple series' and datasets. Each dataset has only 1 value.
ChartOptions={
dataset: [
{ source: [ ["Series1"], [46] ] },
{ source: [ ["Series2"], [56] ] }
],
series: [
{
name: "Series1",
type: "gauge",
datasetIndex: 0,
progress: { show: true },
title: { offsetCenter: ["-60%", "82%"] },
detail: {
formatter: "R1",
offsetCenter: ["-60%", "97%"]
},
min: 0,
max: 180,
splitNumber: 9,
axisTick: { splitNumber: 4 }
},
{
name: "Series2",
type: "gauge",
datasetIndex: 1,
progress: { show: true },
title: { offsetCenter: ["0%", "82%"] },
detail: {
formatter: "R2",
offsetCenter: ["0%", "97%"]
},
min: 0,
max: 180,
splitNumber: 9,
axisTick: { splitNumber: 4 }
}
]
}
However, both pointers are blue - there is no automatic color change for the different series' and issues with the legend. There is quite a bit of repetition in the data configuration. Using a dataset would (as designed) separate the config from the data.
I have also tried a single dataset with multiple values and then using 'encode' in the series, but 'encode' seems to be ignored for Gauge.
My preference is to standardize on using a dataset for all my charts. But if it's not fully supported for Gauge, then I'll take a different approach.
Any insight would be appreciated.
When I have a chart over several months, the interval is set to include the first of the month making intervals uneven and causing labels to overlap. Is this the expected behavior? Is there a way to disable this?
example
Here is an example based off one of echarts examples.
option = {
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
data: [
['2019-08-17', 200],
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-11-15', 100]
]
}
]
};
If you want even intervals, you can instruct echarts to treat the dates as discrete values by changing the configuration of the axis:
xAxis: {
type: 'category',
}
AS shown in image, i want to change Fill color by point (referring project state in my case so),
visual for my chart
code i have used so far to achieve this is below,
$(function () {
$('#ao-projectssummry-chart').highcharts({
type: "spline",
title: null,
borderRadius : null,
xAxis: {
categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'],
opposite: true
//type: 'datetime',
//min: Date.UTC(2011, 4, 31),
//max: Date.UTC(2012, 11, 6)
},
yAxis: {
min: 0,
max: 5,
title : null
},
plotOptions: {
series: {
lineWidth: 20,
borderRadius: null,
radius: 0
},
marker: {
radius : 0
}
},
credits : {
enabled : false
},
legend: {
enabled : false
},
series: [{
name: "Project 1",
data: [1, 1, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}
]
},
{
name: "Project 2",
data: [2, {
y: 2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping : true
}
}, 2, 2, 2, {
y:2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
},
]
}]
});
});
so, how can i change the plotoption color by point? also how can i achieve background lines shown in the picture?
Any help would be appreciated! thanks in advance.
Ok, so it seems the question is different than what I read it as the first time. Rather than changing the color of the point markers, you want to change the color of the segments between markers.
Here is an approach that achieves what you are asking for, using the columnrange series type instead of a line. This allows more flexibility and control.
The idea:
First, set the type, and invert the chart (columnrange is a vertical series type; to make it horizontal, invert the chart - the x axis is now the vertical axis, and the y axis is now the horizontal axis):
chart: {
type: "columnrange",
inverted: true
}
Update the axis settings accordingly (swap x for y).
Set your data with an x value, a low value (starting point), and a high value (end point).
Set the color to whatever you want:
data: [{
x: 1,
low: Date.UTC(2016,3,15),
high: Date.UTC(2016,4,21),
color: 'rgb(0,156,255)'
},{
x: 3,
low: Date.UTC(2016,2,7),
high: Date.UTC(2016,6,15),
color: "rgb(204,0,0)"
}]
To place the markers, add a separate series, either line or scatter (I use line, with a lineWidth: 0, because scatter series use a different tooltip model, and are not as easy to integrate with other series, if the tooltip is important to you. But otherwise, both work the same).
Marker series:
{
name: 'Markers',
type: 'line',
data: [
{
x: 1,
y: Date.UTC(2016,2,15),
marker: {
fillColor:"#9CCB00"
}
}
Example:
https://jsfiddle.net/jlbriggs/x7c3t81n/
Output:
You need to specify that in the data array directly:
Example code:
data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7]
Anything that you can specify in the plotOptions that affects the data point, you can specify in this way for a specific data point.
Any point for which you don't specify anything, follows the default options, or the options specified in the plotOptions.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/126/
Output:
I've got a working combination chart. Line + columns.
The line is at the bottom of the chart because the numbers are low (between 5 - 10%). The columns' numbers are around 80% so they're up to the top of the chart. This is normal behavior.
I know in Excel you can shift or offset this line to the top of the chart so that it sits on top of the columns... Is this possible with Highcharts? How do you do this offset in Highcharts? I looked everywhere in the docs but can't find a solution...
thanks in advance,
Bart
You can use second yAxis, so you will be able to set extremes, which will work as your offset, see: http://jsfiddle.net/3bQne/921/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012', '01/03/2012', '01/04/2012', '01/05/2012', '01/06/2012', '01/07/2012']
},
yAxis: [{
// default options
}, {
opposite: true,
min: 0,
max: 5
}],
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}, {
type: 'line',
data: [4, 4, 4, 4, 4, 4],
yAxis: 1
}]
});
I need to create a chart like this one
https://plus.google.com/u/0/photos/110303712770402448748/albums/5891900514264118753/5891900515184170482?sqi=100875929141897651837&sqsi=9f68aae7-20ae-4a7e-b08c-3df05cfb5f57&pid=5891900515184170482&oid=110303712770402448748
This is what i have riht now with highcharts
http://jsfiddle.net/bcMYf/
I need to know how to group the series of each line and how to represent a info using not just columns, but also lines.
I try using the above code to group de columns, that way one is above another, so what i need now is to represent the columns using lines, like in the image example.
column: {
grouping: false
}
Thanks.
Use objects as points instead of data module, see: http://jsfiddle.net/r9CJw/
series: [{
data: [{
x: 0,
y: 10
}, {
x: 2,
y: 15
}, {
x: 5,
y: 12
}]
}, {
data: [{
x: 0,
y: 8
}, {
x: 2,
y: 9
}, {
x: 5,
y: 10
}]
}, {
data: [{
x: 0,
low: 3,
y: 3.5
}, {
x: 2,
low: 5,
y: 5.5
}, {
x: 5,
low: 6,
y: 6.5
}]
}]
low option is to set where bar should start - now green bars looks like a line. There is only one problem - you need to calculate what value for a low should be to display proper y-value, and still have bar with proper height.