Can any one suggest me the way of adding style to the title of the C3.js donut chart ?
For any donut c3 chart is there any option to set the title style ?
I am using this code for my Donut chart.
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursday', 50],
['Friday', 100]
],
type: 'donut'
},
donut: {
title: "Usage " // How to do? style("color", "#59C2E6")
}
});
Donut title use class c3-chart-arcs-title by render.
You can just override c3-chart-arcs-title style. Your code should be like:
.c3-chart-arcs-title {
fill: red;
font-size: 16px;
}
just override the fill property of .c3-chart-arcs-title style class ,like this :
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://c3js.org/js/c3.min-12912fb6.js"></script>
<style>
.c3-chart-arcs-title {
fill: #59C2E6;
}
</style>
<script>
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursday', 50],
['Friday', 100]
],
type: 'donut'
},
donut: {
title: "Usage " // How to do? style("color", "#59C2E6")
}
});
setTimeout(function () {
chart.axis.labels({
x: 'New X Axis Label',
y: 'New Y Axis Label',
y2: 'New Y2 Axis Label',
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 300, 600, 200, 400, 500]
]
});
chart.axis.labels({y: 'New Y Axis Label Again'});
}, 2000);
</script>
</body>
</html>
Related
I have used doughnut chart in my application, I need border radius but not working, I am using this borderRadius:30, could you please solve this issues.
$(function() {
//get the doughnut chart canvas
var ctx1 = $("#doughnut-chartcanvas-1");
//doughnut chart data
var data1 = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [{
label: "TeamA Score",
borderRadius: 30,
data: [10, 50, 25, 70, 40],
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57"
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46"
]
}]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Doughnut Chart",
fontSize: 18,
fontColor: "#111",
},
borderRadius: 100,
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Chart class object
var chart1 = new Chart(ctx1, {
type: "doughnut",
data: data1,
options: options
});
});
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Doughnut</title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<div class="chart-container">
<div class="doughnut-chart-container">
<canvas id="doughnut-chartcanvas-1"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</body>
</html>
enter image description here
I need bend each corner in our doughnut chart . So how to use this properties inside of our code (outerStart, outerEnd, innerStart, innerRight). could you please let me know. How do I solve this.
You can use:
var data1 = {
borderRadius: [{ innerEnd: 200, outerEnd: 200, innerStart: 200, outerStart: 200}],
spacing: -300,
}
I need to visualize the bar chart with Javascript. So I'm used C3 JS to visualize the chart. Simply I'm using this Bar chart as follows,
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
},
tick: {
format: d3.format("$,") // ADD
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
</script>
But the problem is when X-axis consists of the large data set Chart getting cramped. I have more than 700 data.
Have any possible way to avoid this? can I add scroll bar between primary and secondary X-axis?
Google, such a wonderfull thing ;)
https://c3js.org/samples/interaction_zoom.html
or this
C3 / D3 bar chart with horizontal scroll
How do I remove the horizontal white lines between these stacked columns?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'One', 'Two'],
['2010', 10, 24],
['2020', 16, 22]
]);
var options = {
width: 300,
height: 200,
legend: 'none',
bar: { groupWidth: '100%' },
isStacked: true,
series: {
0: { color: '#40a1ec' },
1: { color: '#ff8888'}
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I know how to remove the vertical white space between bars (using groupWidth), but I can't find a way to remove the horizontal white lines.
Thanks!
I think the only way is to add CSS style to columns so that stroke is not null:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'One', { role: 'style' }, 'Two', { role: 'style' } ],
['2010', 10, 'stroke-width: 1;stroke-color: blue;', 24,'stroke-width: 1;stroke-color: red;'],
['2020', 16, 'stroke-width: 1;stroke-color: blue;', 22, 'stroke-width: 1;stroke-color: red;']
]);
var options = {
width: 400,
height: 400,
legend: 'none',
bar: {
groupWidth: '100%'
},
isStacked: true,
series: {
0: {color: '#40a1ec'},
1: {color: '#ff8888'}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">
</div>
Suppose I'm just using the basic pie chart from plotly's documentation:
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
Plotly.newPlot('myDiv', data, layout);
I want to know how I can outline a specific slice. I'm envisioning something like this:
I don't see anything in the plotly.js documentation that suggests how this might be done, which is why I'm asking here. Thanks!
You can set the width of the line for each of the parts (in the marker).
marker: {
line: {
color: '#444',
width: [0, 5, 0]
},
}
Here is an example:
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
marker: {
line: {
color: '#444',
width: [0, 5, 0]
},
}
}];
Plotly.newPlot('myDiv', data);
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Numeric JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<div id="myDiv">
I am attempting to convert a SVG to Canvas using Canvg. Here is the jsfiddle. I get an error saying, "ERROR: Element 'parsererror' not yet implemented". I can understand that the canvg library is not able to parse the SVG element. But, Is there a solution to this problem ? I need to create a canvas element from svg element.
<head>
<link href="lib/c3.css" rel="stylesheet" type="text/css">
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/d3.min.js" charset="utf-8"></script>
<script src="lib/c3.min.js"></script>
<script type="text/javascript" src="lib/canvg.js"></script>
<script type="text/javascript" src="lib/rgbcolor.js"></script>
</head>
<body>
<div id="chart"></div>
<button onclick="myFunction()">Save</button>
<header><h1>Canvas:</h1></header>
<canvas id="svg-canvas"></canvas>
<script>
var chart = {};
chart = c3.generate({
bindto: '#chart',
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', '2013-01-01 03:11:37', '2013-01-02 03:11:37', '2013-02-03 03:11:37', '2013-03-04 03:11:37', '2013-03-05 03:11:37', '2013-04-06 03:11:37'],
['x2', '2013-01-04 03:11:37', '2013-01-22 03:11:37', '2013-04-13 03:11:37', '2013-05-04 03:11:37', '2013-05-02 03:11:37', '2013-06-06 03:11:37'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 20, 180, 240, 100, 190,230]
],
xFormat: '%Y-%m-%d %H:%M:%S',
names: {
data1: 'Success',
data2: 'Failure',
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S',
count : 5
}
}
},
zoom: {
enabled : true,
rescale: true,
extent: [1, 100]
}
});
chart.show(['data2']);
function myFunction() {
var $container = $('#chart'),
// Canvg requires trimmed content
content = $container.html().trim(),
canvas = document.getElementById('svg-canvas');
// Draw svg on canvas
canvg(canvas, content);
}
</script>
</body>
</html>
P.S : The svg element is created by C3.js (D3.js based reusable library).
As suggested in the comments and on the working jsfiddle, explicitly set tick and path characteristics before generating the canvas:
<div id="chart"></div>
<button id="save">Save</button>
<h1>Canvas:</h1>
<canvas id="svg-canvas"></canvas>
<script>
...
$('#save').click(myFunction);
function myFunction() {
d3.selectAll("path").attr("fill", "none");
d3.selectAll(".tick line, path.domain").attr("stroke", "black");
var $container = $('#chart'),
// Canvg requires trimmed content
content = $container.html().trim(),
canvas = document.getElementById('svg-canvas');
// Draw svg on canvas
canvg(canvas, content);
}
</script>
See: http://jsfiddle.net/vcz468f9/5/