Develop Reference

ApexCharts: Show Shared Tooltip on overlapping y values

Hello everyone I'm trying to make a shared tooltip to happen only when the y-axis values are the same. Which means my markers overlap each other. Same time I want to have the shared option disable. Looking through the docs I found out that this probably can happen with a custom function. Any tips?
My current tooltip options:
tooltip: {
enabled: true,
shared: false,
intersect: true,
y: {
formatter: function (val) {
return val + "%";
},
},
x: {
show: true,
},
marker: {
show: true
},
},
For example in the picture below the marker with the light-green overlap two others lines. If I hover over the marker the tooltip will show me only the value of that line.

Highcharts width continue expanding as chart width grows

What I am trying to achieve is to have a highcharts that width continues increasing as data points increase
currently, I have the following
AM using vuejs with highcharts but should be similar to jquery or others
<div class="col-md-6" style="overflow:auto"> //set overflow css
<div id="container_h"></div>
<div>
now the script code that renders the highchart
this.chart = Highcharts.chart('container_h', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
categories: this.ranges
},
yAxis: {
min: 0,
title: {
text: 'Total trucks'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: this.chartdata
});
The above renders a chart with the
What I am looking forward to achieve is this: the highchart columns to have a fixed width which when it grows it creates a scroll on x-axis so something like this
that has a scroll area
How do I achieve this?

You need to use highstock.js.
There is already an answear there: How to make highcharts scrollable horizontally when having big range in x-axis thanks to #Gopinagh.R
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a
stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations http://api.highcharts.com/highstock#scrollbar.
http://jsfiddle.net/gopinaghr/kUSyF/1/ I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
} Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example http://jsfiddle.net/gopinaghr/kUSyF/293/

Highcharts column and area chart, how to make area chart go to the edge?

I have a chart that is a column chart rendered on top of a area chart. Here is an example:
http://jsfiddle.net/78p42/4/
Is there a way to make the outer edge of the area chart to match up with the outer edges of the first and last columns in the column chart? In case you are not sure what I mean, please see this image I created.
I figured there would be a way to do it in the plotOptions for the area charts, but I can't find a way.
plotOptions: {
column: {
borderWidth: 0,
pointPadding: 0.1,
groupPadding: 0,
states: {
hover: {
enabled: false
}
}
},
area: {
lineWidth: 0,
marker: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
pointPlacement: 0 // I have noticed that this will shift the whole graph over, but then there is a huge gap on one side of the graph
}
},
Thanks for your time.

JQplot - Stacked horizontal bars with only two facts

I want to render a very simple horizontal stacked bar with only two facts. Without any axes.
Like this: My target.
But the only thing i could do is this: My actuell Version.
The Problem is that when i only insert two values (e.g. "2" and "7") it only shows me one bar for the "7".And the second problem is the tick on the left side with these little lines. Dont know how to solve this. Any ideas ?
My Code:
$(document).ready(function(){
var s1 = [2];
var s2 = [7];
var s3 = [10];
plot3 = $.jqplot('chart1', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
// Put a 30 pixel margin between bars.
// barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
},
xaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
//max: 15,
}
},
axesDefaults:{
showTicks: false,
showTickMarks: false,
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid:{
drawGridlines: false,
borderWidth: 0,
shadow: false,
background:'#ffffff',
gridLineColor: '#FFFFFF',
},
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});

It looks like the padMin: 0 setting on xaxis is causing the second series to be incorrectly displayed. If you remove that altogether it works as you want.
As for removing the grid line ticks, try adding this to the axesDefaults settings
tickOptions: {
markSize: 0,
}
So it will now look like this:
axesDefaults:{
showTicks: false,
showTickMarks: false,
tickOptions: {
markSize: 0,
}
},
If it doesn't work with just that, try using the canvasAxisTickRenderer, more details here: http://www.jqplot.com/tests/rotated-tick-labels.php

Setting options.rangeSelector.selected to 0 does not set zoom to correct level in highstock

I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?

rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.