I want to dynamically change axis from linear to logarithmic and vice versa in HighCharts. Please see this fiddle example.
yAxis: {
//linear
type: 'logarithmic',
minorTickInterval: 0.1
},
There is a type: String in api For initial declarative chart setup. I want to dynamically change to logarithmic/linear back and forth.
Use axis.update, see: http://jsfiddle.net/ZCecV/1/ (docs: http://api.highcharts.com/highcharts#Axis.update() )
Related
I want to restrict user to do maximum zoom to 80% for line chart in echarts. Is there any way to do so ?
Yes. You have at least two ways:
The easiest and comfortable:
Add to config component DataZoom, setup it as you needed and hide. The component won't show up but will work. And for the last step just dispatch the action dataZoom:
chartInstance.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
// set as percents
start: '20%',
end: '80%',
// or set as values
startValue: 1234,
endValue: 4321
})
Difficult way:
The each Axes in Echarts has two attributes: min and max that can control view window of axis. Just change it as you need. Also you can pass callback to attributes that will change the value when Echarts draw chart.
I have a graph created following this example. I want to highlight a particular region on the X-axis, say from May to Jul. Is this possible in Fusioncharts? I have already looked into reference zones (no such thing for X-axis) and vertical lines (not applicable to time series-type graphs).
You can check timemarker feature of FusionTime where you define the events that occurred for a certain time frame on the x-axis, here is a snippet how to define it
xaxis: {
plot: "Time",
timemarker: [
{
start: "Jul-1981",
end: "Nov-1982",
label:
"Economic downturn was triggered by {br} tight monetary policy in an effort to {br} fight mounting inflation.",
timeformat: "%b-%Y"
}]
}
To know more about it check this demo - https://www.fusioncharts.com/fusiontime/examples/date-range-event-overlay?framework=javascript
For a bar or column chart in Highcharts, is there a setting(s) to make it automatically set the min of the y-axis based on the min of the data? For example, if my data values fall between 200 and 300, then the plot doesn't look so good if the chart y-axis starts at 0, but rather it looks much better if the y-axis min is 200.
My current approach is supply the yAxis.min setting the minimum vale from the data subtracted by some "smart offset" (smart offset so that the min of the data is not plotted at the very bottom). The problem is i'm not 100% yet how to calculate that "smart offset" so I'm wondering if Higcharts can do the min from the data for me (rather than supplying it), then it might be able also figure out that offset.
You need to enable softThreshold property:
softThreshold: boolean
When this is true, the series will not cause the Y axis to cross the
zero plane (or threshold option) unless the data actually crosses the
plane. (...)
series: [{
softThreshold: true,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/05tgmz9c/
API Reference: https://api.highcharts.com/highstock/series.column.softThreshold
Using ECharts I am giving it a data series that consists of a number of data against really values. (e.g plotting stock prices).
I also have data zoom enabled.
My issue is that the generated X axis' labels overlap with the dataZoom. I can't understand from the documentation how to fix this.
You need to set the value of grid.bottom. This will move the whole grid further from the bottom of the canvas and pull the whole X Axis with it.
Example: grid: { bottom: 60 }
// usage
this._displayedChart.setOption({ grid: { bottom: 10 } })
Not a great solution but works.
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.bottom
I'm trying to create a bubble polar chart with Highcharts, is this possible? Documentation isn't clear about this, and my attempts so far haven't been successful.
It would something look like this:
What have you tried? It's just polar chart with series bubble, see: http://jsfiddle.net/ZYKQG/
series: [{
type: 'bubble',
name: 'bubble',
data: [[100,2,3.3],[45,5,3.2],[225,5,3.1]],
pointPlacement: 'between'
}]