I'm trying the Highcharts tools to display some graph with huge amount of data and series comparison.
the king of graph I need is exactly the one given in this example.
Except that mine has to be displayed in vertical ( with the time line on y axis, from the top to the bottom, and value on the x axis)
like the 'spline inverted' example ( seen here ) show, it's quite useful to display altitude related data for example.
I can easily imagine to invert values and exchange axis legends, but I don't think the time line navigator will follow...
I also tried to set the graph as inverted like in the 'Spline with inverted axes' example :
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
inverted: true
},
...
but it didn't work.
Is there a way to display the exact same graph in vertical with the time line navigator on the y axis ?
EDIT : its seems its not possible to use invert on HighStock graphs (as seen in doc),
So I adjust my question :
Can we use an HighCharts inverted graph to display as many points that in HighStock charts ? (even if we won't get any scroll navigator on the y-axis)
Highstock doesn't support inverted charts, see: http://api.highcharts.com/highstock#chart
EDIT:
It is possible to use inverted Highcharts with dataGrouping, it of course requires Highstock in files, but just create chart using Highcharts.Chart(). Don't forget to enable dataGrouping from Highstock. See example: http://jsfiddle.net/PATyv/2/
Code:
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
inverted: true
},
title: {
text: 'USD to EUR exchange rate'
},
tooltip: {
style: {
width: '200px'
},
valueDecimals: 4
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
dataGrouping: {
enabled: true
}
}]
});
Related
I am using JSCharting library to draw this line chart and in the line chart when you hover your mouse over the graph you get details about the point which straight above or below your mouse pointer. like this:
.
Here is my code for drawing the chart:
JSC.Chart('chartDiv', {
title_label_text: 'ICryptoWorld Price Chart',
legend_visible: false,
type: 'line',
xAxis_crosshair_enabled: true,
yAxis: { scale_minorInterval: 25, formatString: 'c' },
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
defaultPoint_tooltip: `%seriesName : $ <b>%yValue</b> <br>Date: <b>%zValue<b><br>`,
series: series
});
So, as you see:
it shows USD and Date but there is also an value above them (In this case it is 1641475802). How do I remove it or disable it from showing?
Since you enable the crosshair, the main tooltip template for all series is under defaultTooltip_label_text and by default is `%xValue %values'. You can change it to just '%values' which will show only the point tooltips.
JSC.Chart('chartDiv', {
title_label_text: 'ICryptoWorld Price Chart',
legend_visible: false,
type: 'line',
xAxis_crosshair_enabled: true,
defaultTooltip_label_text:'%values',
yAxis: { scale_minorInterval: 25, formatString: 'c' },
defaultSeries_lastPoint_label_text: '<b>%seriesName</b>',
defaultPoint_tooltip: `%seriesName : $ <b>%yValue</b> <br>Date: <b>%zValue<b><br>`,
series: series
});
Hope that helps.
I am developing a layered column chart using ComboChart on Angular google charts. Although I've separated two series of bar charts in two different axis, being able to find a bar in front of the other, like needed, I can't change the width of one of the series only. I want a result like the amCharts Layered Column Chart:
Layered Column Chart example
Right now, the chart looks like:
Current chart - Angular google charts
Also, if there is a way to share the same y axis while keeping one bar in front of the other, instead of staking then, it would be great.
The code I've been using for options of the angular google chart:
this.options =
{
colors: ['#1E90FF', '#f39800'],
hAxis: {
title: 'haxisTitle',
type: 'category'
},
vAxis:{
title: 'Value',
minValue: 0,
format: this.numberFormat
},
seriesType: 'bars',
bar: {1: {groupWidth: "30"}},
series:
{
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1,
}
},
vAxes: {
0: {
title: 'Altered Value',
label:'Altered Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue, // Sets the maximun value of altered or real value to the window size (both axis)
},
format: this.numberFormat,
type: 'bars'
},
1: {
title: 'Real Value',
label:'Real Value',
viewWindow: { // <-- set view window
min: 0,
max: this.maxValue + 0.1*this.maxValue,
},
format: this.numberFormat,
type: 'bars'
}
},
aggregationTarget: 'auto',
stackSeries: true,
isStacked : true,
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
maxZoomIn: 4.0
}
};
}
The chart shows the data correctly, the only problem is the layout.
Some reference that might help:
Google Developers - Visualization: Combo Chart
amCharts Layered Column chart
Overlapped bars - Stack overflow quote - Here the result was a stacked bar chart (something I don't want)
I would like to draw a horizontal target line showing threshold limits on a line, bar and pie chart using EChart.JS (https://ecomfe.github.io/echarts-doc/public/en/index.html).
There are other threads - "Chart.js - draw horizontal line" which detail how to do it with Chart.JS. Has anyone out there got particular experience on this with EChart?
Thanks in advance.
[Edit] Since Echarts v3 came up and was passed to the Apache Foundation, the documentation has been sclattered through different URLs, some options have gone away, some are not shown in all documentation resources, and so on. Links provided below have been updated (as of 24/02/2020) but might break again. I haven't fully tried v3 but provided code below should still work.[/Edit]
The option markLine is designed for that, see documentation here:
https://echarts.apache.org/en/option.html#series-line.markLine
Note that there are different uses for it, and different options to provide, depending on what you want to draw:
arbitrary line on the canvas (any size, any direction, any style)
lines matching data caracteristics (min, max, average)
horizontal/vertical lines
You have to use the attribute markLine.data in all cases, and description of specifics is described here:
https://echarts.apache.org/en/option.html#series-line.markLine.data
Here's how I go, with a line curve on a time serie. Note that I couldn't get, within markLine.data[0], yAxis to be enough to draw a horizontal line: xAxis must be specified too (start and end points).
xAxis: {
type: 'time',
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
data: [
[1509762600, 7.11376],
[1509832800, 7.54459],
[1509849000, 7.64559]
],
markLine: {
data: [
// 1st line we want to draw
[
// start point of the line
// we have to defined line attributes only here (not in the end point)
{
xAxis: 1509762600,
yAxis: 3,
symbol: 'none',
lineStyle: {
normal: {
color: "#00F"
}
},
label: {
normal: {
show: true,
position: 'end',
formatter: 'my label'
}
}
},
// end point of the line
{
xAxis: 1509849000,
yAxis: 3,
symbol: 'none'
}
]
]
}
}]
Here's a fiddle I found: https://jsfiddle.net/381510688/hff93ska/
Note that ECharts really like to display markLines with arrow symbols in the end of it, hence my use of symbol: 'none' in above code, to have just the line drawn.
I am using the Highstock and I've been reading the API documentation to look for the plot labeling however, was unsuccessful.
When I do something like
xAxis: {
labels: {
enabled: true,
name: plot one name,
floor: 0,
}
}
or
series: [{
data: XData,
name: plot one name
}
it does not give me the label at the bottom.
It works in the highchart, but highstock. Is there a documentation / APi to add plot label inside the graph ?
for example, in the following link of the highchart is the plot label of "tokyo" and "london" http://www.highcharts.com/demo/line-labels
The labels you are looking for is called the legend (API).
It is disabled by default in Highstock. You can enable it by adding this code:
legend: {
enabled: true
}
I'm trying to create a chart using highcharts that includes both a column series and a scatter series with a custom point marker. The series will contain slightly different sets of data, but will overlap for the most part and will always have the same x-axis values.
I've set it up, but the problem is that it's not lining up perfectly. Some of the scatter series' points are shifted one or two pixels to the left of the corresponding bar.
Any ideas about how to fix this?
{
chart: {
animation: false
},
xAxis: {
tickInterval: 1
},
series: [{
type: "column",
borderWidth: 0,
pointWidth: 20,
name: "col"
},
{
type: "scatter",
states: { hover: { enabled: false } },
marker: { symbol: 'url(symbol.png)' }
}]
}
And here's a screenshot of what's happening:
Indeed it looks like a bug, also with standard markers, so I've decided to report it to our developers https://github.com/highslide-software/highcharts.com/issues/1843