I was wondering if its possible to decide pixels between two bars? I got 2 series that represents some numbers, and they are standing side by side, 2 and 2 bars next to each other. I just want to control the space between the bars that stands next to each other. For example 10 px.
I've tried different settings from highcharts but havent found anything that seems to work.
You can set pointPadding: 0 and in load event position the columns in the way you want:
chart: {
type: 'bar',
events: {
load: function() {
var series = this.series;
series[0].points.forEach(function(p, i) {
p.graphic.attr({
translateX: 5
});
series[1].points[i].graphic.attr({
translateX: -5
});
});
}
}
},
plotOptions: {
series: {
pointPadding: 0
}
}
Live demo: http://jsfiddle.net/BlackLabel/13re4Lok/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
There are 2 parameters whick can help you pointWidth and pointPadding
pointWidth Documentation
pointPadding Documentation
plotOptions: {
series: {
pointPadding: 0.3,
pointWidth: 10 // Will ignore pointPadding if used
}
},
Fiddle
Related
I created the semi circle using progressbar.js in reactjs. And get the semi circle like this.
I want to make it like this image.
How to do that using reactjs ?
Below is my code
new ProgressBar.SemiCircle(`#container-${id}`, {
strokeWidth: 10,
trailColor: "#191C26",
trailWidth: 10,
easing: "easeInOut",
duration: 1400,
svgStyle: {
stroke: "#"+randomColor,
},
text: {
value: "",
alignToBottom: false,
},
// Set default step function for all animate calls
step: (state, bar) => {
bar.path.setAttribute("stroke", state.color);
},
});
bar.animate(meter);
I want to change the appeareance of the image like this, with giving a circle ending point
I am trying to build chart like expertoption.com and iqoption.com using highchart. I have no experience in the chart. Can anyone tell how to build a chart like expert option live chart?
please check the code below:
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
The issue is that I want the time axis to extend more than the current time.
I am trying to edit this realtime chart.
Below is the reference, I want to build this type of chart: expert option chart
To show more than the current time you can set xAxis.overscroll in Highstock like that:
xAxis: {
overscroll: 10 * 1000 // 10 seconds
}
Demo:
https://jsfiddle.net/BlackLabel/t43qfxh7/1/
I have a requirement where I want my pie chart to display only top 3 data label instead of displaying all and filling the space. Is there any inbuilt highchart api available or a best solution to achieve this?
Here is my jsfiddle:
http://jsfiddle.net/k80ayx1t/
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
}
I have searched enough and tried to find the solution before posting this question but didn't find any help.
You can use dataLabels.formatter function for returning only specific dataLabels (for points thats value is big enough).
formatter: function() {
var val = this.y,
allData = $.extend(true, [], this.series.processedYData).sort(),
length = allData.length;
if (length - 4 >= 0 && val > allData[length - 4])
return val;
}
I am sorting my yValues and then I am checking if my dataLabels points y value is bigger or equal to the third y value of my series. If it is bigger or equal, I am returning value, else I am not returning anything.
Here you can find an example how it can work: http://jsfiddle.net/k80ayx1t/1/
I'm trying to create a graph that can look good on both mobile and desktop using c3 (http://c3js.org/).
However, I'm having trouble getting the x-axis, which is a timeseries, to display change size for mobile. The only way I've managed to do this is by destroying the graph and re-creating it from scratch. But this prevents me from adding a nice transition to the chart, which would be really nice to have.
[![desktop view][1]][1]
I tried using the tick culling option on the x axis and set a max value of 8, but this option gets ignored when using either flush() or resize() methods.
So my question is: is there any way to change the x axis values without having to destroy the graph and re-generate it?
http://imgur.com/EMECqqB
I have used the onresized: function () {...}
or you can use the onresize: function () { ... }
link
to change the culling max on resized screen:
axis: {
x: {
type: 'timeseries',
tick: {
culling: true,
format: '%m-%d',
fit:true,
culling: {
max: window.innerWidth > 500 ? 8 : 5
}
}
}
},
onresized: function () {
window.innerWidth > 500 ? chart.internal.config.axis_x_tick_culling_max = 8 : chart.internal.config.axis_x_tick_culling_max = 5;
},
Here a example: https://jsfiddle.net/07s4zx6c/2/
add mediaquery according to device size
like this.
#media screen and (max-width:810px) {
.c3 svg { font: .8em sans-serif; }
}
I have a chart with two types of graphs: line and bar. And I want to set two different loading times for them as the code shows:
seriesSettings: {
line: {
applyAnimation: {
duration: 7500
}
}
bar: {
applyAnimation: {
duration: 3500
}
}
},
However the chart won’t show. When I remove the settings the chart works fine again. Is there a special sequence I need to set these properties?
There is no special sequence. Regardless of the series types used, you can set their delays in just any order. In your code there is a typing error. Find correct one below:
seriesSettings: {
line: {
applyAnimation: {
duration: 7500
}
},
bar: {
applyAnimation: {
duration: 3500
}
}
},