I have common x axis for all 3 charts. Want to show X-axis label only for the last chart selected. I wouldn't know exactly how many chart I would select. So this has to be dynamic.
I tried below:
I initially disable x-axis label for all charts. Need to enable x-axis label only for the last chart selected(Which would be the bottom most chart).
document.querySelectorAll('#checkboxes input').forEach(function(checkbox) {
checkbox.addEventListener('change', (e) => {
const id = e.target.dataset.id,
checked = e.target.checked,
checkedCheckboxes = document.querySelectorAll('#checkboxes input:checked').length,
node = document.querySelector(`#chart${id}`);
const chartEps = [
chartEp1,
chartEp2,
chartEp3,
]
console.log("id", id)
//chartEps[id].xAxis[0].options.labels.enabled = true
// The ID has to be the id of last chart selected. So that only for last chart xAxis label is enabled.
chartEps[id].update({
labels: {
enabled: true
},
});
Please see fiddle: https://jsfiddle.net/xhLt6a01/8/
Instead of dynamic x axis label, I also tried setting empty chart with x axis which need to shown at all times at the bottom (commented code at the bottom of fiddle).
But couldn't get both options to work. I would really appreciate If I could get any help on this.
To dynamically enable/disable the labels, in the update call, set the option xAxis, but (somehow unexpectedly) it should be at the top level of the options object, at the same level as chart:
Highcharts.charts.forEach(function(chart, i) {
chart.update({
chart: {
height: height / checkedCheckboxes
},
xAxis:{
labels: {
enabled: ...your boolean criterion here for chart i...
}
}
});
});
For the particular case when you want to enable the axis only for the last shown chart I'd use something on lines of
{enabled: selected[i] && selected.indexOf(true, i+1) === -1}
where selected is an array that keeps track on selected checkboxes, that is equivalent to shown charts. Take a look at this fiddle for a modified version of your original code.
Related
I am using eCharts to create a stacked and grouped bar chart, it is my first time using eCharts. but clicking on axis label tick not working properly , I want when clicking on axis label tick (example: Brand1) it should hide that Brand but is not working, the code looks like:
myChart.on("click", (params) => {
if (params.targetType === "axisLabel") {
params.event.target.invisible = true;
params.event.target.silent = true;
params.event.target.scale[0] = 0;
params.event.target.scale[1] = 0;
// myChart.setOption();
console.log("params ", params, "option ", option);
}
});
you can check the full demo in demo
any help please?
So What I am doing is that I am taking timestamp data as X axis and the values as Y-axis.
but the problem arises is that the data is not displaying on the chart althogh the timestamp values are being displayed in the console, but not displaying on chart.
the data values are as follows:
var countArray = ["2020-14-03 11:14:48.225000","2020-14-03 11:14:48.226000","2020-14-03 11:14:48.227000","2020-14-03 11:14:48.228000","2020-14-03 11:14:48.229000","2020-14-03 11:14:48.230000","2020-14-03 11:14:48.231000","2020-14-03 11:14:48.232000","2020-14-03 11:14:48.233000","2020-14-03 11:14:48.234000","2020-14-03 11:14:48.235000","2020-14-03 11:14:48.236000","2020-14-03 11:14:48.237000","2020-14-03 11:14:48.238000","2020-14-03 11:14:48.239000","2020-14-03 11:14:48.240000","2020-14-03 11:14:48.241000","2020-14-03 11:14:48.242000","2020-14-03 11:14:48.243000","2020-14-03 11:14:48.244000"]; //X-axis Values
var numArray = [2,5,3,6,4,6,3,6,3,6,3,7,3,6,3,5,3,5,6,3] ; // Y-axis Values
Here is the Fiddle That I am trying.
https://jsfiddle.net/abnitchauhan/wq4na5fy/
the main problem is that the data is not displaying as per the values above
You have set the shift argument in the addPoint method to true, which, combined with an empty data array, causes that points do not appear.
if (x > 1000) {
series.addPoint([x, y], true, false, false);
}
Live demo: https://jsfiddle.net/BlackLabel/xhok1d6e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
You have to enable tooltip in highcharts option like below:
tooltip: {
enabled: true,
},
The tooltip's content is rendered from a subset of HTML.
Highcharts Tooltip document
Highcharts Tooltip API Reference
Following is my resultant chart
Here the value of legends Happy and Very Happy is 0, hence it is overlapping each other and unable to read. So, How can I hide these values and strike through the legends while loading itself like in the below image? And yes, it is a dynamically loaded chart.
Link - Reference Pie Chart
Thanks in advance.
I am posting this answer hoping that, it will be helpful for someone later. You can also post a better solution if found.
After some deep diving into the library the files, I realised that is there are no direct answers to my question. But we can achieve that by emptying the label text in case of 0 data values.
For that, we must edit the chart options as follows,
public pieChartOptions: ChartOptions = {
responsive: true,
legend: {
position: 'top',
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
const label = ctx.chart.data.labels[ctx.dataIndex];
if (ctx.dataset.data[ctx.dataIndex] > 0)
return label + " : " + ctx.dataset.data[ctx.dataIndex];
else
return "" // retun empty if the data for label is empty
},
}
},
showLines: true,
spanGaps: true,
cutoutPercentage: 1,
rotation: 15, // rotate the chart
};
Here in the function returns empty value in case the data for the corresponding label is 0. Also I rotate the chart 15deg to make the labels horizontal align in most cases.
Reference - Chart.js documentation
Hence I achieved a better view to the user and the overlapping issues are resolved. Thanks.
I'm trying to show category axis for Amcharts Multi Panel Horizon chart. I tried setting the category axis property to true, but it enabled the x axis for all the charts.
"showCategoryAxis": true,
Is there a work around to show Multi horizon chart with a single x axis.
Here is demo with "showCategoryAxis": true,.
Modify the buildPanel function so that showCategoryAxis is set to false by default for all panels and then set one of them (presumably the last one) at the end of the init handler loop to false. You'll also want to set axisHeight to 0 in categoryAxesSettings so that the height of the last panel, or whichever one has the category axis enabled, doesn't shrink.
function buildPanel( dim ) {
return {
// ...
"showCategoryAxis": false,
// ...
};
}
//in addInitHandler:
for ( var i = 0; i < dimensions.length; i++ ) {
// ...
}
chartPanels[chartPanels.length - 1].showCategoryAxis = true;
chart.panels = chartPanels;
Demo
I need to change the threshold value on click of rangeSelector in HighStock graph.
Also, I need to change the line value inside PlotLines of y-axis.
I tried following code
xAxis: {
events:{
setExtremes: function(e) {
if (e.trigger == "rangeSelectorButton" &&
e.rangeSelectorButton.text == "1m"){
// this.threshold = 20;
alert("on click of 1m range selector");
// for threshold value
this.threshold=20;
this.series[0].plotOptions.threshold=20;
this.plotOptions[0].series[0].threshold=20;
this.rangeSelector.clickButton(0, true);
// for changing the line value of plotLines
this.yAxis[0].plotLines[0].value=20;
}
},
}
},
Click here for jsfiddle link
I have put some alert to test that click on rangeSelector is working fine.
I tried to change the values but the chart is not getting updated.
Any help would be really appreciated.
Inside setExtremes, this references the xAxis object. The threshold is on the series object, so you need to get a reference to the right series.
var series = this.chart.series[0];
Then, you need to update it with the new value.
series.update({threshold: threshold}, false);
I'm passing false for the redraw parameter, since we're also going to update the plotLine, and we'll only want to redraw once.
For the plotLine, you'll need a reference to the yAxis.
var yAxis = this.chart.yAxis[0];
And, then you'll need to pass the new plotLine settings to the update method.
yAxis.update({
plotLines: [{
value: threshold,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}]
});
https://jsfiddle.net/w6bzohgd/3/