I need to drop lines from the flags on highStock graph to the series but I do not know how can I do something like that.
I checked highCharts flags and I know it has Y attribute for the data but this is not what I need, first because Y is only one for number of flags and because Y value itself is not related to the Y axis scale.
I checked also xAxis.plotLines but those lines to xAxis or yAxis and I need those lines to stop on the series like the screen shot.
This is the code for series and flags:
series: [{
type: 'area',
name: seriesName,
data: seriesData,
id: 'dataseries'
},
{
type: 'flags',
data: chartFlags,
stackDistance: 20,
width: 16,
"shape": "url(http://www.highcharts.com/demo/gfx/sun.png)"
}]
Any advice?
Have you looked at plotOptions.flags.onSeries? This seems like it would do the trick.
onSeries: String The id of the series that the flags should be drawn
on. If no id is given, the flags are drawn on the x axis. Defaults to
undefined. Defaults to undefined.
Sample usage:
series: [{
type: 'area',
name: seriesName,
data: seriesData,
id: 'dataseries'
},
{
type: 'flags',
data: chartFlags,
onSeries: seriesName,
stackDistance: 20,
width: 16,
"shape": "url(http://www.highcharts.com/demo/gfx/sun.png)"
}]
You can also use a renderer to add custom shape.
HighCharts flags does not support this since Y in highCharts flags not represent the y axis value and default value for it is -30. To solve this, I create invisible series from the flags value and I put those flags on this series.
Related
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
Currently, on enabling the legend of sunburst chart in Highcharts, single series label is seen in legend. Refer following JSFiddle: http://jsfiddle.net/amrutaJgtp/7r8eb5ms/6/
Highcharts pie chart legend shows the all the category labels in the legend. Refer following Pie chart legend: http://jsfiddle.net/amrutaJgtp/wgaak302/
series: [{
name: 'Sales',
colorByPoint: true,
showInLegend: true,
data: [{
name: 'Consumer',
y: 2455
}, {
name: 'Corporate',
y: 6802
},{
name: 'Home office',
y: 9031
}, {
name: 'Small Business',
y: 5551
}]
}]
Is it possible to show all the data points of the sunburst series or atleast the categories - Consumer, Corporate, Home Office, Small Business in legend?
In my opinion the answer is no.
Please refer to this demo: http://jsfiddle.net/kkulig/u3p1usz9/
I tried to implement this functionality by setting legendType = 'point' (not docummented in the API, but it works) and overwriting H.Legend.prototype.getAllItems, but it seems that hiding points is not supported for sunburst. There's no method that will do it - check out the console.log output. Switching visibility of the point by using visible property doesn't work either. Legend behaves properly, but there's no effect on the plot area.
Workaround
This simple example shows how to mimic desired legend behavior: http://jsfiddle.net/kkulig/kn10kb7L/
First I added additional two series that have no data:
{
type: 'line',
name: 'p1',
color: 'blue'
}, {
type: 'line',
name: 'p2',
color: 'blue'
}
The color of the legend item markers needs to be handled manually by setting the color of the 'fake' series.
I created visible flag for every leaf for controlling its visibility.
Then I used their legendItemClick callback function to filter the full data set and perform setData on the first series using the filtered data.
legendItemClick: function(e) {
series = this;
data.forEach(function(leaf) {
if (leaf.id === series.name || leaf.parent === series.name) {
leaf.visible = !leaf.visible;
}
});
this.chart.series[0].setData(data.filter((leaf) => leaf.visible));
}
API reference: https://api.highcharts.com/highcharts/plotOptions.sunburst.point.events.legendItemClick
If you think that hiding points should be implemented in sunburst series you can share this idea here: https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api
Update
If you want an animation to happen use addPoint and removePoint instead of setData.
API references:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Series#removePoint
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 have a page where I can put in two timeintervals and after posting these two timeintervals I get the amount of sold tickets between these two dates.
i get back multiple data depending on how far back I go.
My problem:
If I go as far back as to the first insert of the database.
I will get a high value of for example 200 tickets and after that I calculate the difference between each row in the database which gives me a chart like this:
As you see in the image I would like to reduce the space between the y-axis points in order to see the smaller values better.
In the example above I have a bar that is 160 and other bars that are for example 1 or 2 and I can hardly see them on the chart
Code for this:
buildCharts: function (target, chartData, chartEnum) {
$(target).highcharts({
chart: {
type: 'column',
height: 300,
},
title: {
text: chartEnum.name
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: chartEnum.text
}
},
series: [{
name: 'SystemInfo',
showInLegend: false,
colorByPoint: false,
data: chartData,
turboThreshold: chartData.length + 500
}],
});
}
How can I reduce space between y-axis points?
Using the "tickInterval" attribute is the easiest way to go about this (see http://api.highcharts.com/highcharts#xAxis.tickInterval).
If you wanted to set this based upon the total number of tickets you're viewing (assuming from your question that you can choose the point in time you want to start), what you could do is set that tickInterval based on the length of your series data (for example, if the data more than 100 items, set a tickInterval of 4; otherwise, set a tickInterval of 2 or 1). Do this by creating the chart's options, and then changing the value in the options after you grab your data, but before drawing/redrawing the chart.
There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge?
It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
http://jsfiddle.net/uqa0t3xw
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent" (JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false by default. Alternatively you could set that to true, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.