I have a stack of plots which are actually individual charts and would like to override the behaviour of the export options which appear on the first chart to save them all?
Could that be possible? I have the charts in an array in my javascript.
One also annoying feature, is that menu is truncated. Is there a way to bring this to the front? I didn't see an option.
Thanks
The simplest solution is to create one chart with multiple yAxis:
series: [{
data: [...]
}, {
data: [...],
yAxis: 1
}, {
data: [...],
yAxis: 2
}],
yAxis: [{
height: '30%'
}, {
height: '30%',
offset: 0,
top: '33%'
}, {
height: '30%',
offset: 0,
top: '66%'
}]
Live demo: http://jsfiddle.net/BlackLabel/rha36dfz/
API Reference: https://api.highcharts.com/highcharts/yAxis
Related
I am storing chart data in localstorage.
Then I add them to the chart.
chart_obj.addAxis({
id: element.yAxis,
lineWidth: 1,
lineColor: '#08F',
offset: 0,
});
chart_obj.addSeries({
type: element.type,
linkedTo: ''+element.linkedTo+'',
yAxis: element.yAxis
});
As a result, my height indicator is on a different indicator.
The thing is that you have to set the height and position manually there.
But, when you add an indicator from the menu of indicators, it is added normally.
Example
How does adding yAxis automatically recalculate the height?
I tried different methods from the API, read the forum - but nowhere found information on how to do it.
To ensure that the series do not scale, you need to do an update on the axes and set their top and height.
chart_obj.yAxis[0].update({
title: {
text: 'updated'
},
height: '50%',
top: '50%'
})
chart_obj.addSeries({
type: 'ao',
yAxis: 1,
greaterBarColor: '#00cc66',
lowerBarColor: '#FF5E5E',
linkedTo: 'AAPL',
showInLegend: true
});
chart_obj.yAxis[1].update({
title: {
text: 'updated'
},
height: '50%',
top: '0%'
})
},
DEMO: https://jsfiddle.net/BlackLabel/u3s2cjyv/
Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.
How do I set up a АpexChart so I can display similar data
var options = {
series: [{
name: "Level",
data: [30,45,50,60,70,91,125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Battery',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.
Take a look at this issue and this pull request on GitHub.
Comment of the library author (2019), from the issue:
This has been proposed, but not worked upon yet.
Comment of the library author (2021), from the PR:
Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases.
Please bear with us. There might be a new PR with a completely different implementation.
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
i am making a web page where i am having many graphs like the ones here
http://vz.comxa.com/v2/
I am using highcharts JavaScript charting library. To make one chart you write the code like shown here http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
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')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
and the html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Since my charts are placed in modals,does it mean i must have the javascript for each chart in the page header. Due to the sheer number of charts involved,i reckon that's be a lot of JavaScript. What technique can i use to reduce the lines of javascript i will write?.
When building multiple charts you can reuse same options. One way could be to use Highcharts.merge function to add new options to the common ones.
Demo with Highcharts.merge in use - 2 charts: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
More complex option could be to create a custom series type with changed default options and optionally more features if required.
Demo - Sprakline: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/sparkline/
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