I am trying to implement Drill-down with stacked bar chart.
Issue is when I click on chart it shows drill down detail but it shows more category then I am assigning.
So, could you please help me to fix the issue?
My code is available in JSFIDDLE
function setChart(name, categories, data, color, level, type) {
alert("Chart should have categories :-" + categories.length)
chart.xAxis[0].setCategories(categories);
//chart.xAxis[0].categories = categories;
var dataLen = data.length;
for (var i = 0; i < chart.series.length; i++) {
chart.series[0].remove();
}
for (var i = 0; i < dataLen; i++) {
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
You need to update max property:
chart.xAxis[0].update({
categories: categories,
max: categories.length - 1
}, false);
Live demo: https://jsfiddle.net/BlackLabel/zkquLt0y/
API Reference: https://api.highcharts.com/highcharts/xAxis.max
Related
Please refer the image. I need to show datalabels name over on each color of the progress.
var markers = JSON.parse('<%=ConvertDataTabletoString("uspTaskProgress1","",null,1,10) %>');
var colors = ['skyblue', 'orange', 'red','blue'];
var statusprogress = ['Overall Subtask Percentage'];
var Arrayset = [];
var starts1 = [];
var ends1 = [];
var val1 = [];
var val2 = [];
var categories = [];
if (markers != null) {
if (markers.length > 0) {
var prj=document.getElementById("param1").value;
for (var i = 0; i < markers.length; i++) {
var syearval = parseInt(markers[i].ActualStart.substr(0, 4));
var smonthval = parseInt(markers[i].ActualStart.substr(5, 2))-1;
var sdateval = parseInt(markers[i].ActualStart.substr(8, 2));
var eyearval = parseInt(markers[i].ActualEnd.substr(0, 4));
var emonthval = parseInt(markers[i].ActualEnd.substr(5, 2))-1;
var edateval = parseInt(markers[i].ActualEnd.substr(8, 2));
val1 = [Date.UTC(syearval, smonthval, sdateval)];
val2 = [Date.UTC(eyearval, emonthval, edateval)];
starts1.push(val1[0]);
ends1.push(val2[0]);
Arrayset.push({ color:colors[i],name: markers[i].Task, start: starts1[i], end: ends1[i], completed: markers[i].OverallSubtaskPercentage, y:0});
}
for (var j = 0; j < markers.length; j++) {
categories.push(markers[j].Task);
}
MainLoadChart(Arrayset, categories);
}
}
function MainLoadChart(array,categories) {
var dta = array;
Highcharts.ganttChart('container8', {
chart: {
type: 'xrange'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: categories,
},
title: {
text: 'Task Progress Indicator Status'
},
tooltip: {
formatter() {
let output = ` <span style="font-size: 20px;color:green">${prj}</span><br>
<span><b>${this.key}(Overall Subtask Percentage):${this.point.completed}% </b></span><br>
<span>Start: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x)}</span><br>
<span>End: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x2)}</span>`
return output
}
},
series: [{
data:dta,
dataLabels: {
formatter() {
let output1 = ` <span style="font-size: 10px">${this.point.completed}%</span>`
return output1
}
}
}]
});
}
I added datalabels property in series.data but it's not showing in the output. Can let us know how to add the data labels name on each color of the task progress. Image attached. It's a highcharts gantt chart.Code is attached please have a review on the code
You can set the dataLabels options, like formatter to set what data label should display, for each point in the data config.
Like this:
data: [{
name: 'test1',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25,
y: 0,
dataLabels: {
enabled: true,
x: 150,
formatter() {
return 'test1'
}
}
}, ...]
Demo: https://jsfiddle.net/BlackLabel/am0w5Lkr/
In the above demo I set the x to some fixed value because I am not sure if your chart should be responsive or not. In case of the responsive chart, I encourage to use the render callback https://api.highcharts.com/highcharts/chart.events.render to calculate datalabels position after each resizes.
API: https://api.highcharts.com/highcharts/series.line.dataLabels.x
API: https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
I am having an issue with Highcharts highstock column chart. With xaxis min=0, max=5 [page size] which has 20 categories.
After the initial load when you scroll the xaxis to the end and then click on modify data. On this action I will invoke an api and update the series data. 'The chart displays as No data to display' even if there is one category. I wanted to reset scroll to initial position, which I cannot do for categories. You will need to move scroll manually
Also Since there is only one category and I do not want other categories to display as numbers.
https://jsfiddle.net/shashi3337/zcf8kvgx/7/
I am updating the chart to modify xaxis min and max to set max as 0 [ 1 category] to remove numbers.
https://jsfiddle.net/shashi3337/zcf8kvgx/5/.
Now when you click on Add data which adds back the data. I am resetting min=0 and max=5. Now
I just see only 1 category per page scroll.
Expected Behavior
I expect the scroll bar to be automatically scrolled back after I click modify data button and when I click on add data button I expect to see 6 categories per page scroll on xaxis.
function test(n) {
var data = [];
for (var i = 0; i < n; i++) {
var value = Math.random() * 10;
var x = {
id: i,
name: 'test ' + i,
y: value
}
data.push(x);
}
return data;
}
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min:0,
max:5
},
scrollbar: {
enabled: true
},
series: [{
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
$(document).ready(function(){
$('#modify').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.addSeries({
name: 'new',
data: test(1)
});
}
});
$('#add').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.update({
xAxis: {
min:0,
max:5
}
});
chart.addSeries({
name: 'A',
data: test(20)
});
}
});
});
Found the answer to this.
You need to use xAxis.setExtremes() to modify extremes on the chart. At this moment, extremes set by user (e.g. by scrollbar) have the highest priority and are not cleared when you remove all series.
Example https://jsfiddle.net/BlackLabel/pp2qpxks/
chart.xAxis[0].setExtremes(0, 0);
I want to disable the hover effect entirely
this is code a snippet
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
enabled:false
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
but still when I mouse out there is some color effect is there
here is a jsfiddle highmaps fiddle(please change the series options as above )
how to fix that color effect when mouse out happens from the map point, any help or reference will be appreciated.
After some struggle I got the solution of the above problem you just have to take the all the points object of the series data and on hover give them the same color as they are having currently, but you can not give the color directly like this
states: {
hover: {
color:this.color
}
},
Hence you can put some hack like this
$('#container').highcharts('Map', options);
var points = $('#container').highcharts().series[0].data;
for (var i = 0; i < points.length; i++) {
points[i].pointAttr.hover.fill = points[i].color;
}
and problem is solved...!!!!
Here's a solution without jquery:
const map = new Highcharts.Map(chartOptions);
(function() {
var points = map.series[0].data;
for (var i = 0; i < points.length; i++) {
points[i].pointAttr.hover.fill = points[i].color;
}
})();
Just pop this in after you instantiate your map.
The solutions of #Vikas did not work for me. pointAttr was not 'defined'.
Setting the hover color:null and brightness:0 worked for me:
states: {
hover: {
color: null, // Set no specific color to use original color
brightness: 0 // Prevent brightness effect
}
}
You could disable it, like this:
states: {
hover: {
enabled: false,
}
},
I've created the chart with Column and Line series, where I'm adding the series dynamically using the chart.addSeries.
Issue:
When clicking the line series legend, the line series disappears. when clicking it for the second time only the plot points are visible and line is not visible.
I'm getting following JS exception:
Line: 65
Character: 237
Code: 0
Error Message: Object doesn't support property or method 'join'
URL: http://pfmonline.fidelitypfm.com:8098/moneycenter/js/js/rbc/highcharts.js?d=1592588911
Below is the code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'spendingChart',
width: spendingChart.width*0.8,
height: spendingChart.height*0.8,
plotBorderColor:'#000000',
plotBorderWidth:1
},
xAxis: {
categories: subCategories,
labels: {
rotation: 0
}
},
credits: {
enabled: false
},
tooltip: {
borderColor: '#000',
backgroundColor: '#FFF',
borderRadius: 0,
borderWidth: 1,
formatter: function() {
var s;
s = ''+this.series.name+', '+this.x +', $'+Highcharts.numberFormat(this.y,2,'.',',');
return s;
}
},
title: {
text: ''
},
yAxis: {
lineWidth: 1,
title: {
text: ''
}
},
series: []
});
for(var i=0;i<data[index].drilldown.length;i++){
if(data[index].drilldown[i].name == "Actual")
chtType = "column";
else
chtType = "spline";
subCategories = [];
versionsData = [];
var color = "";
for (var j = 0; j < data[index].drilldown[i].data.length; j++) {
versionsData.push(data[index].drilldown[i].data[j].y);
subCategories.push(data[index].drilldown[i].categories[j]);
color = (data[index].drilldown[i].data[j].color);
}
chart.xAxis[0].setCategories(subCategories, false);
chart.addSeries({type:chtType, name :data[index].drilldown[i].name, data : versionsData ,color:color},'true');
}
I have the same issue with the lines disappearing when clicking the legend and found the solution, apparently it was a bug involving the 2.2.5 version and jQuery 1.8. They have fixed it so if you upgrade to the latest 2.3.5 it will be fixed.
Reference: https://github.com/highslide-software/highcharts.com/issues/1189 and https://github.com/highslide-software/highcharts.com/issues/1181
Hope that helps
I hope you are using IE.
Since you are with arrays, check for any trailing commas.
If your IE version is < 8. Check for the IE mode. If your in quirks mode.
var test = [
["element1"],
["element2"],
["element3"],
["element4"],
["element5"],
];
Remove the trailing ,.
Alternatively, you can check either by logging or alerting the length.
console.log(test.length);
or
alert(test.length);
The length you will observe will be 6 instead of 5.
I built a stacked bar chart with drilldown
http://jsfiddle.net/uemit/9CJHq/1/
and I configured the chart to have "marginLeft: 90". But I'd like "marginLeft" to be "40" when the drilldown happens. Is there a way to set marginLeft dynamically?
function setChart(name, categories, data) {
chart.counters.color = 0;
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i]
});
}
}