I have a line type eCharts graph and I want to fill the area between the line and the y axis.
The default area filling behaviour happens vertically, the chart fills out the space between the line and the x axis.
I know I can swap axes in other chart libraries but doesn't look like an option here in eCharts.
These are the options I'm using to set up the chart:
const options = {
tooltip: {
show: false
},
grid: {
show: true,
top: 0,
bottom: 40,
left: 50,
right: 10,
},
xAxis: {
id: 'x',
type: 'value',
min: 0,
max: 4,
},
yAxis: {
id: 'y',
type: 'value',
inverse: true,
min: range?.min,
max: range?.max,
axisLine: {
show: true
},
splitLine: {
show: true
},
axisTick: {
show: true
}
},
series: {
type: 'line',
xAxisId: 'x',
yAxisId: 'y',
symbol: 'none',
smooth: true,
connectNulls: false,
// 2d array like [[1,1000], [3, 1250], ...]
data: filteredData.data,
lineStyle: {
color: '#f00',
},
areaStyle: {
color: '#f00',
origin: 'auto'
}
}
};
Thanks.
Ok, looks like treating the y axis type as a category instead of value and removing the y axis boundaries did the trick.
yAxis: {
id: 'y',
type: 'category', // category and not value
// y axis boundaries removed
...
Outcome after these changes:
Related
Im trying to explicitly set the min value for the x axis but for some reason the chart still uses 0 instead of the value im providing.
standAloneChartOptions = {
container: document.getElementById('myChart'),
autoSize: true,
data: someData,
series: [
{
xKey: 'foo',
yKey: 'bar',
yName: 'Bar',
stroke: '#03a9f4',
marker: {
fill: '#03a9f4',
stroke: '#0276ab',
},
tooltipEnabled: false,
}
],
axes: [
{
type: 'number',
position: 'top',
title: {
enabled: true,
text: 'Foo'
},
min: 50,
max: 1000,
tick: {
count: 20
}
},
{
type: 'number',
position: 'left',
},
],
legend: {
position: 'bottom',
},
};
the max value is set accordingly so im confused as to what im doing wrong, would much appreciate the help, thanks!
I am using Highcharts (Highstock) to render a chart on my page.
I am specifying a max and min value for my axis, but despite this I end up with blank space above my graph:
This is what my options look like currently:
var myChart = new Highcharts.Chart('container', {
rangeSelector:{
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: true,
},
yAxis: [{
opposite: false,
title: {
text: 'Gravity'
},
min: 1,
max: items.options.gravity_max + 0.01
},
{
opposite: true,
title: {
text: 'Temperature (C)'
},
min: items.options.temperature_min - 1,
max: items.options.temperature_max + 1
}],
navigator: {
enabled: false,
},
scrollbar: {
enabled: false
},
series: [{
name: 'Temperature',
data: items.temperature,
dataGrouping: {
enabled: true
},
yAxis: 1,
}, {
name: 'Gravity',
data: items.specific_gravity,
dataGrouping: {
enabled: true
}
},
{
name: 'OG',
data: items.original_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
},
{
name: 'FG',
data: items.final_gravity,
dataGrouping: {
enabled: true
},
dashStyle: 'dot',
color: '#000'
}]
});
Here is a link to a fiddle with a simplified version of the data; http://jsfiddle.net/3eLrn61w/
What is causing that blank space above, and how do I get rid of it?
This is because Highcharts by default will try to start and end an axis on a label. Your current max is 1.071+0.01 (1.081). This is more than the label checkpoint of 1.075, which causes another label to be made.
You can fix this by doing (JSFiddle example):
yAxis: [{
// ...
endOnTick: false
}]
A few other options you might want to evaluate is the matching axis.startOnTick: false, possibly axis.maxPadding: 0 to avoid creating labels that are marginally needed and chart.alignTicks: false to free up the connection between the axis.
An alternative approach will also be to alter the tick positions (axis.tickPositions or axis.tickPositioner) so that they line up better with your min and max values.
Or your third option is to alter your handcoded maximum of the axis (max: items.options.gravity_max + 0.01), so that it does not create such a label gap, f.x. by being max: 1.074.
However, I think your best bet may be with the startOnTick and endOnTick options.
I have a scenario where in i have to create markers/Circles in Spline chart.
I created spline chart using highcharts, the code is below for the chart.
and my output should be like below. and i have marked the expected circles the image:
$(function () {
var image;
var line,
label,
image,
clickX,
clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}
var step = function (e) {
line.translate(e.pageX - clickX, e.pageY - clickY)
if (image) {
image.translate(e.pageX - clickX, e.pageY - clickY)
}
if (label) {
label.translate(e.pageX - clickX, e.pageY - clickY)
}
}
var stop = function () {
$(document).unbind('.line');
}
$('#ao-salesoptimization-graph').highcharts({
chart: {
type: 'spline',
spacingBottom:40,
spacingTop: 5,
spacingLeft: 0,
spacingRight: 10,
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
gridLineColor: '#eeeeee',
gridLineWidth: 1,
type: 'datetime',
min: Date.UTC(2010, 0, 1),
max: Date.UTC(2020, 0, 1),
labels: {
enabled :false
},
plotLines: [{
color: '#004a80',
dashStyle: 'Dot',
value: Date.UTC(2014, 7, 10), // Value of where the line will appear
width: 5,// Width of the line
zIndex: "10",
label: {
text: '<span class="drag"></span>',
}
}],
tickWidth: 0
},
plotOptions: {
series: {
lineWidth: 4,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: "#4b0081",
states: {
hover: {
enabled: true,
fillColor: "#0047ab",
lineColor: "#fff",
lineWidth: 3,
}
},
}
}
},
yAxis: {
min: 10000,
max: 100000,
gridLineColor: '#eeeeee',
gridLineWidth: 1,
title: {
text: 'Sales',
style: {
fontWeight: "bold",
fontSize: "14"
}
},
label: {
formatter: function () {
return (this.y / 1000) + "k"
}
},
tickWidth: 0,
},
series: salesoptimizationgraphhData()
}, function (chart) {
label = chart.xAxis[0].plotLinesAndBands[0].label;
image = chart.xAxis[0].plotLinesAndBands[0].image;
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: '#004a80'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
image = chart.renderer.image('../../../Content/Img/ao-chart-scroller.png', 285, 300, 64, 24).attr({
zIndex: 100
}).translate(0, 0).addClass('image').on('mousedown', start).add();
});
});
How can i achieve this?
You could use spline and scatter series with Draggable Points plugin.
Example: http://jsfiddle.net/0moy3q71/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
plotOptions: {
series: {
stickyTracking: false
},
scatter: {
cursor: 'move'
}
},
series: [{
data: [[3,200],[5,123]],
draggableY: true,
draggableX: true,
dragMinY: 0,
type: 'scatter'
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0],
type: 'spline'
}]
});
Hopefully I understand your question correctly. I have created a spline chart. Focus on the August data where I explicitly define a standalone marker. Check this out .
Edited: I don't think it's achievable to move a pointer to a random place as each pointer must have values to both x and y axis. Don't think we can plot something that is floating around in Highcharts context. Not encouraging other HTML/javascript hacking around.
The best I can come out is this. Two series are created. Some points are hidden in the first series and only one big pointer available in second series.
I am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.
JSON Array
var jsonObj=[ {
name:"Nov-10 18:00",
data:[50],
type:'column'
},
{
name:"Nov-20 20:00",
data:[60],
type:'column'
},
{
name:"Nov-10 22:00",
data:[70],
type:'column'
},
{
name:"Nov-12 20:00",
data:[80],
type:'column'
}]
HighChart related code
dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];
var seriesData=jsonObj;
console.log(seriesData);
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 10
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 00,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series:jsonObj
});
DEMO
The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.
The question then becomes:
Do you want to have a categorical xAxis or a datetime xAxis?
Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.
Here is an example using categorical type.
Here is an example using datetime type.
When the graph redraws (zoom or resize), the Y axis values change (the max value changes) leaving a big white gap on the top of the graph (no data).
Here's a JsFiddle of the problem (with both real and fake data, same result) and some pictures of my actual graph.
These are my options for that chart :
var chartOptions = {
title: false,
xAxis: {
lineWidth: 0,
type: 'datetime'
},
yAxis: [{
lineWidth: 0,
},
{
lineWidth: 0,
opposite: true,
}],
tooltip: {
shared: true
},
series: [{
name: 'A',
yAxis: 0,
type : "area",
},
{
name: 'B',
yAxis: 1,
type : "area",
},
{
name: 'C',
type : "spline",
yAxis: 0,
}],
plotOptions: {
area: {
threshold: null
},
},
chart: {
zoomType: 'x',
},
legend: {
enabled: false
},
};
You can set alignTicks as false. Example: http://jsfiddle.net/b1vrvn2q/9
chart: {
zoomType: 'x',
alignTicks:false
},