score:0
create a new canvas object and position it under the actual chart. this new chart has the split data values. make sure that the datapoints in your original chart that are split have a transparent background so that the underlying splits show through.
preview
html
<div class="splitcontainer">
<canvas id="canvas" height="300" width="800"></canvas>
<canvas class="canvassplit" id="canvas2" height="300" width="800"></canvas>
</div>
css
.splitcontainer {
position: relative;
}
.canvassplit {
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
script
var datapichart2 = [
{
value: 200,
color:"rgba(247, 70, 74, 0.6)",
label: "php1"
},
{
value: 150,
color:"rgba(247, 70, 74, 0.2)",
label: "php2"
},
// values that are not split remain as is
{
value: 100,
color: "#46bfbd",
label: "javascript"
},
{
value: 500,
color: "#fdb45c",
label: "html"
}
];
new chart(document.getelementbyid('canvas2').getcontext("2d")).pie(datapichart2, {
segmentshowstroke: false
});
var datapichart = [
{
value: 350,
// transparent show the split shows through
color:"rgba(247, 70, 74, 0.2)",
highlight: "rgba(247, 70, 74, 0.7)",
label: "php"
},
fiddle - http://jsfiddle.net/ww8qpdvw/
Source: stackoverflow.com
Related Query
- How to add overlay color to chart.js pie chart segment?
- How set color family to pie chart in chart.js
- ChartJS version 3 how to add percentage to pie chart tooltip
- How to add area with break on line chart with fill color
- How to use segment property to color line / border color based on value in chart js?
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How add the sizes of the slices in the pie chart (at the top) in Chart.js?
- how to add Thousand separator in pie chart tooltips of charts.js
- How can I add background color of length bars in chart (chartJS)?
- ChartJS - How to add Text between Pie Chart and Legend
- Chart.js - add data to line chart from clicking pie chart segment
- How to add a coloured legend box to a pie chart with Chart.js v1?
- How to add text inside the doughnut chart using Chart.js?
- How to add an on click event to my Line chart using Chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- How to add an offset to a dataset in Chart js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- Chart.js v2.6: Add arrows to pie chart output values
- How to add datas to chart js from javascript array itself?
- How to change the color of legend in chartjs and be able to add one more legend?
- How to add panning to chart in chartjs?
- How to display data labels outside in pie chart with lines in ionic
- How to hide section in a Chart.js Pie Chart
- How to change line segment color of a line graph in Chart.js?
- How to create single value Doughnut or Pie chart using Chart.js?
- Chart.js Pie Chart: How to set background image for segment
- how to add a title to my ng2-charts bar chart
More Query from same tag
- Vuechart js not rendering on a component
- ChartJS doughnut colors not showing from a Flask app. All gray
- Chart JS Error : Uncaught TypeError: Cannot read property 'top' of undefined
- Stacked bars in Charts.js from a JSON list of objects
- chart.js tooltip keeps remembering old data after update
- Prevent size of canvas chart js to equal window height and width
- Add a text as tooltip for each point on a line chart
- How to put 2 labels and distinct tooltips from two bars
- Small value in doughnut chart is not visible - Chartjs
- angular-chart.js, how to change colours labels
- Chartjs: Make some ticks (Sunday, Saturday) red
- Chartjs-node with canvas-prebuilt is still throwing 'Cairo not found' errors
- how to get React chartjs to resize back down with window
- Make x label horizontal in ChartJS
- Is it possible to change pointStyle for elements of a ChartJS bubble chart per dataset?
- How to bind json array data to chart.js with same canvas id?
- how to reduce list chart to one and use select dropdown to show selection without refresh page?
- How to get values inside a chart without clicking
- Chart does not display on webpage in Django app (with Chart.js)
- React chart2js Line chart with multiple datasets overlapping
- Styling problems with Chart.Js
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Display line chart with connected dots using chartJS
- Can i use crosshairs with OHLC/candlestick charts using ChartJS
- Canvas line chart on this graph stretch beyond the assigned lengths
- How to have chart.js automatically build x-axis labels based on x,y dataset?
- chart.js hide gridline inside chartarea but keep y-axis border
- Is it possible to get the assigned ref name in a component? Vue.js
- Data Visualization DataTables.js using chart.js
- Chart.js with Node.js