Develop Reference

How to add trendline to line chart highcharts in JSON

im currently struggling to create a trend line to a line chart. found some old solutions and those things didn't work for me.
Current code:
{
"key": "003",
"title": "Detections",
"type": "chart",
"chartData": {
"chart": {
"type": "line",
"renderTo": "container"
},
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"categories": ["Jan 7", "Jan 14", "Jan 21", "Jan 28",
"Feb 4","Feb 11","Feb 18","Feb 25",
"Mar 4","Mar 11","Mar 18","Mar 28",
"Apr 1","Apr 8","Apr 15","Apr 22","Apr 29",
"May 6","May 13","May 20","May 27"
]
},
"colors": [ "#f89c1b"],
"yAxis": {
"title": {
"text": "Number of Exits"
}
},
"plotOptions": {
"line": {
"dataLabels": {
"enabled": true
},
"enableMouseTracking": false
}
},
"series": [{
"name": "Week",
"data": [60,12,29,48,
24,31,15,37,
32,16,22,29,
21,13,9,14,15,
10,12,13,7]
}
]
},
"index": 2,
"defaultWidth": "100%"
}
Current chart:
enter image description here
How do i add trend line to this line chart? is there any built in parameter to add trend line?

First, load and initialize indicators and trendline modules. Then add new trendline series. For example:
series: [{
id: "mainSeries",
name: "Week",
data: [...]
}, {
type: 'trendline',
linkedTo: "mainSeries"
}]
Live demo: https://codesandbox.io/s/highcharts-react-demo-fork-wubgnd?file=/demo.jsx
API Reference: https://api.highcharts.com/highstock/series.trendline

How can I remove Axis Lines from Vega Lite Chart

I'd like to remove / hide the axis lines from the vega-lite chart below. I've tried changing the colour to null (as below) or other colours and that doesn't work.
https://vega.github.io/editor/#/gist/fc799bc9f7a8f28b8f1f2ec84673e965/VL with axis lines.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"responseType": "Yes", "proportion": 28},
{"responseType": "No", "proportion": 7}
]
},
"mark": "bar",
"encoding": {
"y": {
"field": "responseType",
"type": "nominal",
"title": null,
"axis": {"axisColor": null, "grid": false, "ticks": false}
},
"x": {
"field": "proportion",
"type": "quantitative",
"title": "% of Responses",
"axis": {"axisWidth": "100", "grid": false, "ticks": false}
}
}
}

domain hides the axis lines, so setting "axis": {"domain": false, "grid": false, "ticks": false} for both x and y produces this chart:
If you also add "config": {"view": {"stroke": null}} as a top level property, you get rid of the grey outline:
Open the Chart in the Vega Editor

Group x axis labels

I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.

Add line to 3d column chart in Highcharts

I'm using highcharts to make some data charts in a project and at the moment, doing it in 2D it works perfectly:
Chart working in 2D
This is a set of percentages for each month, with a red line that indicates the goal % to easily visualize whether or not a set of data is over or under that percentage.
The problem is now that I'm trying to make it 3D to give it more of a 'pop', I include the 3D library and enable it but the graph turns out like this:
Chart NOT working in 3D
Even though the bars display as intended, the line messes up and is nowhere near where it should be.
I've tried changing from spline to scatter with no success. Does anyone have any idea as to how I can fix this, or maybe a different way to present this "goal" so that you can easily see which bars are over or under it.
Thanks in advance!
PS: This is the JSON for the Highcharts options I'm using for 3D:
{
"chart": {
"options3d": {
"enabled": true,
"alpha": 0,
"beta": 0,
"depth": 20
}
},
"title": {
"text": "Title"
},
"xAxis": {
"categories": [
"a",
"b"
],
"crosshair": false,
"gridLineWidth": 1,
"min": 0,
"max": 1
},
"yAxis": {
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
"plotOptions": {
"column": {
"pointPadding": 0.2,
"borderWidth": 0
},
"scatter": {
"width": 10,
"height": 100,
"depth": 10
}
},
"series": [
{
"name": "ENERO",
"type": "column",
"data": [
99.8,
99.77
]
},
{
"name": "FEBRERO",
"type": "column",
"data": [
100,
99.83
]
},
{
"lineWidth": 1,
"name": "Meta (99.8%)",
"type": "scatter",
"color": "#FF0000",
"marker": {
"enabled": false
},
"legend": {
"enabled": false
},
"data": [
[
-1,
99.8,
2
],
[
2,
99.8,
2
]
]
}
]
}

The line chart is not fully supported in 3d, but if your goal is draw a line only, you can use plotLines.
"yAxis": {
"plotLines":[{
"value": 99.5,
"width": 2,
"color": 'red'
}],
"floor": 98,
"ceiling": 100,
"title": {
"text": "%"
}
},
Demo:
http://jsfiddle.net/v66zt28y

How to add category axis title in amcharts stock charts

Here is the demo of my graph in Amcharts.Working Pen
Here I have included
"panels": [{
"titles": [{
"id": "Title-1",
"size": 15,
"text": " Taxi State Analysis"
}],
"categoryAxis": {
"title": "Time spent in Minutes",
},
"stockLegend": {}
}]
The chart title works fine but the category axis title did not appear. I also tried
"categoryAxesSettings": {
"minPeriod": "mm"
"title":"Time in minutes "
}
This also did not work.Any help is appreciated.

I think you are trying to show the value axis title since that only make sense after looking into your code pen. Let me know if i am mistaken here.
you can do that using below properties.
"panelsSettings": {
"marginLeft": 50
},
"panels": [{
"valueAxes": [ {
"title":"Time spent in Minutes"
}],
"titles": [{
"id": "Title-1",
"size": 15,
"text": " State Analysis"
}],
"stockLegend": {}
}],
Code Pen : http://codepen.io/anon/pen/mOgrKp