score:14
You can add a callback function to legends onClick:
var options = {
animation: false,
scales: {
yAxes: [{
position: "left",
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Total SQL Queries'
},
id: "y-axis-0"
}, {
position: "right",
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: 'Slow SQL Queries'
},
id: "y-axis-1"
}]
},
legend: {
onClick: function(event, legendItem) {
//get the index of the clicked legend
var index = legendItem.datasetIndex;
//toggle chosen dataset's visibility
SQLPerformanceChart.data.datasets[index].hidden =
!SQLPerformanceChart.data.datasets[index].hidden;
//toggle the related labels' visibility
SQLPerformanceChart.options.scales.yAxes[index].display =
!SQLPerformanceChart.options.scales.yAxes[index].display;
SQLPerformanceChart.update();
}
}
}
score:1
This solution applies if you are using angular-chartjs, and if you want to apply this behaviour to all displayed charts.
If you want to skip to the code, check this fiddlejs.
You can also check this other fiddlejs to check the default Angular-Chartjs behaviour.
Step by step:
I use the first chart example in angular-chart.js, so this will be the final result after clicking:
<div ng-app="app" ng-controller="MainController as mainCtrl">
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
</div>
- Replace the handler of the global Chart:
Chart.defaults.global.legend.onClick = function (e, legendItem) {
var idx = legendItem.datasetIndex;
// IMPORTANT charts will be created in the second and third step
var chart = charts[e.srcElement.id];
chart.options.scales.yAxes[idx].display = !chart.options.scales.yAxes[idx].display;
var meta = chart.getDatasetMeta(idx);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null ? !chart.data.datasets[idx].hidden : null;
chart.update();
};
- Create a global variable
charts
so we can get access each of the charts with the canvas id:
var charts = {};
- Fill up the charts variables using the
chart-create
event:
angular.module("app", ["chart.js"]).controller("MainController", function ($scope) {
$scope.$on('chart-create', function (event, chart) {
charts[chart.chart.canvas.id] = chart;
});
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [...
I wish there would be a better way of getting a chart from the canvas id, but as far as I know this is the suggested way by the developers.
score:1
This solution applies if you are using ng2-charts with chart.js and Angular 7^ and if you want to apply this behavior to all displayed charts.
import Chart from chart.js
Chart.defaults.global.legend.onClick = function (e: MouseEvent, chartLegendLabelItem: ChartLegendLabelItem) {
const idx: number = chartLegendLabelItem.datasetIndex;
const chart = this.chart;
chart.options.scales.yAxes[idx].display = !chart.options.scales.yAxes[idx].display;
const meta = chart.getDatasetMeta(idx);
meta.hidden = meta.hidden === null ? !chart.data.datasets[idx].hidden : null;
chart.update();
};
or for local configuration
legend: <ChartLegendOptions>{
onClick: function (e: MouseEvent, chartLegendLabelItem:ChartLegendLabelItem) {
const idx: number = chartLegendLabelItem.datasetIndex;
const chart = this.chart;
chart.options.scales.yAxes[idx].display =
!chart.options.scales.yAxes[idx].display;
const meta = chart.getDatasetMeta(idx);
meta.hidden = meta.hidden === null ?
!chart.data.datasets[idx].hidden : null;
chart.update();
}
}
Source: stackoverflow.com
Related Query
- Hide Y-axis labels when data is not displayed in Chart.js
- ng-charts not updating labels when chart data is updated at same time
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- ChartJS shows date, but not time, when displaying labels in time axis
- Vuejs - Chart.js wrapper vue3-chart-v2 not displaying labels when data are passed as object
- Angular-Charts bar chart does not update when I change the data, series, labels
- X and Y axis labels not displaying on line chart (Chart.js)
- Chart.js not showing data when pass dynamic labels
- Chart is not populating when getting the data from AJAX call
- Firefox is not responding when loading 800+ data sets in Bar Chart with Charts.Js
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart.js returns a console error and does not display the chart when using variables as data input
- Not all date data shows on x axis line chart
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Position of the x-axis labels is not in sync with the line chart data points
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- Chartjs Bar Chart showing old data when hovering
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart JS data labels getting cut
- Chartjs hide data point labels
- show label in tooltip but not in x axis for chartjs line chart
- Using Chart.js - The X axis labels are not all showing
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Changing x axis labels in Chart.js line chart
- How to display data labels outside in pie chart with lines in ionic
- Line chart with large number of labels on X axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Why can I not see a data value when hovering over a point on the radar chart?
- Uncaught TypeError: Chart is not a constructor when using Chart.js
More Query from same tag
- vue-chartjs with chartkick vertical bar chart
- How can I query data from my Cosmos DB in Angular 7?
- Center origin of a Scatter Chart
- Chart.js: How to calculate the labelOffset based on the distance between ticks?
- Chart JS not reloading in Partial View
- Chart JS, Choose different Y-axis for different datasets
- Can I plot random points on a chart.js or Google Charts chart?
- Chart JS dynamic chart
- Chart.js Fill color at null line and null points Tooltip
- Click on interactive chart.js bar chart and get value for labels and groups in JS
- Error: $injector:modulerr Module Error - chart.js
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- first and last value is not displaying in chart.js used with django
- math.max() doesn't work in IE
- js error: while trying to display graph using chart.js: Uncaught TypeError: Cannot read property 'call' of undefined
- ChartJS "half donut" chart not displaying properly
- Chartjs / Javascript - My function not returning array properly, but console logs okay
- chart.js chart distorted with fixed width
- Fetch more data for line chart onZoom/onPan issues
- Trouble with chart scaling and zooming using Chart.js and chartjs-zoom-plugin
- JavaScript critical error...Syntax Error (MVC 5) when passing array to Charts.js
- Mark X value on Chart Js graph
- How to change states for making dynamic pie chart?
- How to display data from top to bottom in stacked bar-chart QuickChart?
- Link in ChartJS tooltip not clickable
- Is it possible to use mouseenter and mouseleave event in chart js?
- creating a chart.js scatter graph with variables for data
- Is it possible to display values where the display ends instead of on top of the points with chartjs?
- opening json file to create chart in chart.js
- Chart js: Update line chart having two data sets