I'm working with the columnrange chart type, and some of my could end up being much much smaller than the normal size, so I would like to specify the minPointLength so that the small data points are still visible amidst their larger neighbors and can easily be hovered over and clicked on. I have tried placing the minPointLength option in multiple places throughout my code, but it doesn't seem to ever affect the size of the columns. I have gotten minPointLength to work fine on other chart types, but not with the columnrange chart. Here is a little js fiddle I borrowed and modified to attempt to accomplish what I want: http://jsfiddle.net/kdCgU/7/
$(function() {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
xAxis: {
labels: {
enabled: false
}
},
plotOptions: {
series: {
minPointLength: 10, //This doesn't seem to do anything
dataLabels: {
enabled: true,
},
}
},
series: [{
name: "Product A",
data: [[-200, 200]]},
{
name: "Product B",
data: [[-150, 150]]},
{
name: "Product C",
data: [[-100, 100]]},
{ name: "Small Data",
data: [[0, 1]]}
]
});
Any help would be greatly appreciated, thanks!
It is known bug reported here , but is fixed in master branch.
http://jsfiddle.net/sbochan/kdCgU/8/
Like I said in my comment it is a bug. It is already reported on their github here.
It seems to be fixed on the master :
http://jsfiddle.net/xAU6X/
Related
Picture as a reference
I want to build this type of chart and my data set link is below. I'm unable to find any example regarding this.
https://docs.google.com/spreadsheets/d/1geCzzfBeyY8yDHAdEFWUSUf8ex3QWfqDtPg7ArOdTw0/edit?usp=sharing
From the referred image I can see that it is a stock chart, which demo base you can find here: https://www.highcharts.com/demo/stock
How to align the series to the particular yAxis you can find here: https://api.highcharts.com/highcharts/series.line.yAxis
Sample demo: https://jsfiddle.net/BlackLabel/95ptgrec/
// Create the chart
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'axis1'
}
}, {
title: {
text: 'axis2'
}
}, {
title: {
text: 'axis3'
},
opposite: false
}],
series: [{
data: generateData()
}, {
data: generateData(),
yAxis: 1
}, {
data: generateData(),
yAxis: 2
}]
});
If you want to implement charts in Angular or React environment I encourage to use the official wrappers:
https://github.com/highcharts/highcharts-angular
https://github.com/highcharts/highcharts-react
I am attempting to use the Multiple RadialBars chart to show 3 percentages, along with the "Total" average percentage in the middle. Documentation for this chart can be found here: https://apexcharts.com/vue-chart-demos/radialbar-charts/multiple-radialbars/
My issue is with how the chart displays the "Total" value. I would like this value to go out two decimal places, but instead, it keeps the full floating point value. I've attached an image to elaborate.
RadialBar Long Percentage
I know this problem can be fixed by using a formatter for the total, and simply using the .toFixed(2) method. However, I can't seem to figure out the formatter for this chart. Without using a formatter, the default behavior finds the average of all three percentages (as seen above). The documentation unfortunately does not elaborate on how to customize the formatter function.
var efficiencyOptions = {
series: [],
chart: {
height: 350,
type: 'radialBar',
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
show: true,
fontSize: '22px',
},
value: {
show: true,
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
// formatter function goes here
formatter: function (w) {
// Need to find average of three percentages and fix to two decimal places
}
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E'],
labels: ["Laser 1", "Laser 2", "Laser 3"],
};
If anyone could help me figure out this formatter function it would be very appreciated. Thank you very much in advance.
value: {
formatter: function(val) {
return parseInt(val);
},
color: '#111',
fontSize: '36px',
show: true
},
I am tried to get the series from the already displayed highchart and use that series to plot a new chart in another one html div, i have written below code to achieve this,finally i get the series from existing graph but can't render to the new html div
var data = chart.series; // series from already displyed
jQuery('#commonModal_res').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series: data,
});
note : throwing too many recursion error
The problem occurs because you're trying to assign the complete and already built series object, instead of configuration object which is required. In order to make it work, you need to assign the configuration object by this way:
$('#new_con').highcharts({
chart: { zoomType: 'x'},
title: { text: "" },
subtitle: { text: 'Click and drag in the plotted area to zoom in' },
xAxis: { type: 'datetime' },
legend: { enabled: false },
series:charts[0].userOptions.series,
});
Then your chart should be rendered properly.
Additionaly, you can access appropriate chart by the Highcharts.charts array on global Highcharts object, where all charts are stored, just like that:
series: Highcharts.charts[0].userOptions.series,
In this case creating new charts array is unnecessary.
Live example: http://jsfiddle.net/cqfj5t34/
I have the following scenario in haml:
#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]}
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]}
and in javascript:
$(function(){
$('#ownershipChart').highcharts({
chart: {
type: 'pie'
},
title:{
text: 'Ownership'
},
plotOptions:{
pie:{
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $('#ownershipChart').attr('chart-data')
}]
});
});
As you can figure, I'm trying to create one highcharts function that applies across these two charts at the same time. First, I know this is incorrect because $('#ownershipChart').attr('chart-data') isn't returning anything. Second, is this the right way to think about it? I'm currently dynamically generating the haml div id="ownershipChart" so dynamically generating a highcharts js object every time also feels wrong.
What's the best way to generate multiple highcharts when the div ids they are attached to is unknown and varies user by user?
You could instead use a class, and loop through each instance creating the chart as you go. Something like this:
$(function () {
$('.ownershipChart').each(function() {
$(this).highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Ownership'
},
plotOptions: {
pie: {
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $(this).attr('chart-data')
}]
});
});
});
Note that the data property is filled by a reference to this, which means the data will be read from the current element in the iteration.
At the moment I have two entirely different charts
$(div).highcharts({
title: {
text: ""
},
credits: {
enabled: false
},
xAxis: {
type: "datetime",
},
legend: {
enabled: false
},
yAxis: yAxis.ranking,
series: data.rankings
});
and
$(div + "Count").highcharts({
chart: {
type: 'column',
},
title: {
text: ""
},
credits: {
enabled: false
},
xAxis: {
type: "datetime",
},
yAxis: yAxis.count,
series: data.counts
});
I need the xAxis of both to match up identically. Both charts ordinarily have 4 series and tend to line up quite nicely, however in the scenario where they have between 1 and 3 series, then the second chart goes out of sync with the top one and centres in the middle with a big amount of whitespace on either side.
I was wondering if there was a way to force the second graph to take on the exact xAxis of another graph.
xAxis is an object
Maybe can you just declare this object outside highcharts methode.
Inside both highcharts methode use the declared object.
Yes, you can use linkedTo option http://api.highcharts.com/highcharts#xAxis.linkedTo