Do Highcharts have (or working) on multiple axial like this ?
https://www.fusioncharts.com/charts/line-area-charts/line-chart-with-multiple-axes-and-series?framework=javascript
Yes, they have. In fact, we've got an array of axes, so we can have several of them.
API references:
https://api.highcharts.com/highcharts/xAxis
https://api.highcharts.com/highcharts/yAxis
Demo:
https://jsfiddle.net/eu6omtg1/
yAxis: [{}, {
opposite: true
}, {}, {
opposite: true
}],
Related
I`m struggling with the esthetic aspect of my chart. Actually it lookes like this:
Chart is showing data over time in 10mins intervals. With that number of labels it`s hard to see what column matches to time.
I would like to create ticks like on the image, so the chart would be way more readable. I looked into documentatnion and tried this but without effect:
scales: {
xAxes: [
{
ticks: {
drawTicks: true,
},
},
],
Pasting the answer from the comment section,
best way to work with ticks is by using callback function eg:
ticks: {
callback: function (value: any, index: any, ticks: any) {
return 'What you want to return';
},
}
I am visualizing multiple dataset on a Chart JS. Whenever I enable/disable a dataset. This dataset would create an instance of its data. On my case, it is xAxes.
and when I enable another dataset:
I want to disable creating another instance of xAxes and every it would share the same fixed axes.
xAxes: [{
type: 'time',
distribution: 'linear',
ticks: {
source: 'data'
},
time: {
parser: 'HH:mm:ss',
unit: 'hour',
unitStepSize: 1,
//min: '00:00:00',
//max: '23:59:59'
}
}],
Update: 1
I used round: 'hour', to include in xAxes.time. It looks fixed. However, I don't know why points always go to corners and spread freely with time as shown:
Update: 2
I removed
/*ticks: {
source: 'data'
},*/
Now it is scaled.
Removing the
ticks: {
source: 'data'
},
made the graph scaled with time.
I want to switch from Highcharts to ECharts (preferably 3), but my current graphs have multiple series ('lines' in my case), with each their own yaxis, and it seems ECharts doesn't support this.
These metrics do not relate at all, so they all need their own yaxis. I combine them in 1 chart so they can be compared relative to each other (500 visits, €30000, 3% conversion.. etc). It makes no sense to plot 500 visits and 3% conversion rate on the same yaxis.
Is there a way to give each line it's own yaxis? It doesn't have to be a visible one (since there can only be two with ECharts, left/right of canvas, and that's ok), but the data needs to be plotted to an individual axis.
try this
yAxis: [
{
type: 'value',
name: 'left_yaxis',
nameTextStyle: {
color: '#fff'
},
splitLine:{
show:false,
},
axisLabel: {
textStyle:{
color:'#fff',
}
}
},
{
type: 'value',
name: 'right_yaxis',
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval:'0',
textStyle:{
color:'#fff',
}
},
splitLine: {
lineStyle: {
color: ['#454545'],
}
},
min:0,
//max:800000,
splitNumber:5
}
],
Here ar example from echarts for dual y axis:
example 1
example 2
You can add more than one y axis in echarts by making yaxis element as a array
Yes, ECharts supports multi-axis. See example at ECharts Gallery.
I have generated a graph inside highstock (see example - http://jsfiddle.net/szFQa/),
however, by default, it groups data that is chronologically close together, and stops the timeline from showing time in a linear form.
I've tried using the following options, there seems to be no change though.
plotOptions : {
series : {
dataGrouping : {
enabled : false
},
}
},
What options need to be set to stop the grouping and show the timeline as linear?
In case when you disable dataGrouping like this http://jsfiddle.net/szFQa/1/ then points are not grouped, because in your data you have 16 points and on the chart is also 16 points.
plotOptions: {
series: {
dataGrouping:{
enabled:false
},
marker: {
enabled: true
}
}
},
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.