score:0
Accepted answer
i managed to put two charts on top of each other with the help of how can i stack two same-sized canvas on top of each other? :)
html:
<div class="wrapper">
<canvas id="canvas1" width="400" height="300"></canvas>
<canvas id="canvas2" width="400" height="300"></canvas>
</div>
css:
.wrapper {
position: relative;
width: 400px;
height: 300px;
}
.wrapper canvas {
position: absolute;
top: 0;
left: 0;
}
javascript:
datainner = {
datasets: [{
data: [10, 10, 10, 10,10, 10],
borderwidth:0,
backgroundcolor: ['blue', 'white', 'white', 'white', 'white', 'white']
}]
};
optionsouter = {
events: ['click'],
// change the background color of the "inner chart" depending on the clicked segment
onclick: function(evt){
var activepoints = myinnerpiechart.getelementsatevent(evt);
// check if the was possible to determine the active point, if not return
if (typeof activepoints === 'undefined' || activepoints.length <1) return;
var selectedindex = activepoints[0]._index;
// change the background color of all arcs till the selected index
var tmp_data = [];
for (var i = 0; i < myinnerpiechart.data.datasets[0].backgroundcolor.length; i++) {
if (i <= selectedindex){
tmp_data.push('blue');
}
else{
tmp_data.push('white'); // same color as "bar_fill" css class
}
}
myinnerpiechart.data.datasets[0].backgroundcolor = tmp_data;
myinnerpiechart.update();
}
}
dataouter = {
datasets: [{
data: [10, 10],
borderwidth:1,
bordercolor: ['black', 'black']
}]
};
var myinnerpiechart = new chart($('#canvas1'), {
type: 'pie',
data: datainner
});
var myouterpiechart = new chart($('#canvas2'), {
type: 'pie',
data: dataouter,
options: optionsouter
});
it looks like this and i think this should help to achieve my requirements: https://jsfiddle.net/xuce274p/3/
Source: stackoverflow.com
Related Query
- How to have more controls over the borderColor per arc segment for chart.js pie charts
- How can I have different values for the chart and the tooltip in chart.js?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart.js Pie Chart: How to set background image for segment
- PrimeNg bar chart how to show a label for the y-axis
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- How to create a chart that uses strings for both the X and Y axes?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Chart is too big. How can I reduce size for the chart in vue js?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to use set the color for each bar in a bar chart using chartjs?
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How add the sizes of the slices in the pie chart (at the top) in Chart.js?
- how to make scrollable the legends of pie chart ( chart js )
- How do I increase the arrow length on the pie chart in Charts.js?
- Chart.js How to sum the values in a pie chart and display them in the header
- How to put dynamic colors for pie chart - chart js
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
- how to put a second pie chart right next to first pie chart inside the bootstrap card
- How to display labels outside the pie chart border?
- How to add the value for each label to pie legend
- How can I remove the white border from Chart.js pie chart when all legends are hidden?
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- React-chart does not render the legend for PIE chart
More Query from same tag
- Implementing Charts.js in Laravel 5.1
- ChartJS chart is bugged after adding new data
- Chart JS Legend Styling
- dynamically fill a json variable
- How to change the z-index of chartjs annotations label?
- Is it possible to maintain two different font size in Chart.JS based on screen size?
- generator-angular-fullstack and angular-chart.js not displaying charts
- React js and chart js pie chart type
- ChartJS line chart or bar graph from a Java program
- Chartjs display bug when pushing data to graph
- charts.js straight lines - i cant find a solution
- How to show only the data points that have a change in Chartjs?
- Order and hide items of legend by value with Chartjs Angular
- ChartJs - set background color of the space between ticks
- Chart.JS customization - how to debug?
- Show wrong information in chart js 2
- I can not properly re scale <canvas> with width and height attributes
- Chart.JS Starting at 00:00am and ending at 23:59pm
- How to convert chart.js library chart to image in pure node.js without using HTML and CSS?
- Fill Chart.js bar chart with diagonal stripes or other patterns
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Updating chart.js with array index 0 doesn't work
- How to noshown the scale while all datasets is hidden (chartjs)?
- Why is this chartjs graph not being loaded? (Using Vue.js)
- MongoDB based data is not populating in Chart.js
- dump missing date in data for chartjs
- How do you limit the blur in a linear gradient on a canvas?
- Multiple usage of Javascript function
- React: How to get loading spinner to show whilst API data loads into my chart.js chart
- what are the differences between 'NgChartModule' and 'chartModues'?