Is it possible to outline a pie piece using plotly.js? - javascript

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">

Related

Want to reduce padding/space between Plotly.JS heatmap and text from another div - need CSS

I have a Plotly.JS heatmap that's working great and I have some descriptive text I want to put above it in a separate div, however the gap looks a bit awkward. Somehow I am struggling to reduce the padding so that my text (e.g., My description) and the heatmap and closer together. I tried using CSS, but I am clearly off. I'm sure this is an easy answer and that I'm overlooking something simple. Any help is appreciated.
Codepen: https://codepen.io/tenebris_silentio/pen/eYzgZMw
<!DOCTYPE html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<br>
My description.
<div id='myDiv'><br> </div>
</div>
</div><script>
var colorscaleValue = [
[0, '#ADD8E6'],
[1, '#000080']
];
var data = [
{
z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
y: ['Category 1', 'Category 2', 'Category 3'],
colorscale: colorscaleValue,
type: 'heatmap',
hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',
hoverongaps: true
}
];
var layout = {
title: '',
width: 900,
height: 560,
autosize: false,
yaxis: {automargin: true}
};
Plotly.newPlot('myDiv', data, layout);
</script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>
<style>
.myDiv{
padding: -1px;
}
</style>
You can use the margin configuration in your layout:
var layout = {
// ...
margin: {
t: 10
},
// ...
<!DOCTYPE html>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<br>
My description.
<div id='myDiv'><br> </div>
</div>
</div><script>
var colorscaleValue = [
[0, '#ADD8E6'],
[1, '#000080']
];
var data = [
{
z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
y: ['Category 1', 'Category 2', 'Category 3'],
colorscale: colorscaleValue,
type: 'heatmap',
hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',
hoverongaps: true
}
];
var layout = {
title: '',
width: 900,
height: 560,
autosize: false,
margin: {
t: 10
},
yaxis: {automargin: true}
};
Plotly.newPlot('myDiv', data, layout);
</script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>
<style>
.myDiv{
padding: -1px;
}
</style>
Why not add the text in the layout itself?
var layout = {
"title": {"text": "My description."},
...
};
Because Plotly.JS is generating a SVG its not easy to style it. A solution is to style a element with position absolute so you can make it "overlap" with the SVG.
For example:
var colorscaleValue = [
[0, '#ADD8E6'],
[1, '#000080']
];
var data = [
{
z: [[41, 60, 25, 24, 28], [56, 27, 14, 45, 17], [47, 17, 12, 47, 17]],
x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
y: ['Category 1', 'Category 2', 'Category 3'],
colorscale: colorscaleValue,
type: 'heatmap',
hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',
hoverongaps: true
}
];
var layout = {
title: '',
width: 900,
height: 560,
autosize: false,
yaxis: {automargin: true}
};
Plotly.newPlot('myDiv', data, layout);
</script><!-- Plotly chart will be drawn inside this DIV --></div></div></div>
.myDiv{
padding: -1px;
}
p {
position: absolute;
z-index: 10;
margin-top: 45px;
margin-left: 80px;
}
<p>My description.</p>
<div id='myDiv'></div>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

Plotly JavaScript: Customize y ticks or labels on y axis

Iam using Plotly.js https://plotly.com/javascript/. I am trying to develop a chart where I want to add a small image on each ticks on the y axis. For reference please see the image given below.
Notice the small gray discs on y axis (next to the texts "Red", "Green" and "Blue"). I am trying to achieve something like this. However on the reference document, I couldn't find anything that does this.
How can I achieve that?
[UPDATE]
After implementing the answer as suggested by #Ruben, and further making some updates, I get this little tip of the x-axis extended to the left to the negative side (ref. the screenshot of this extended tip below)
If it's really only about the dots, I've hacked together something that inserts this unicode shape as a solid, black circle at every bar using annotations. Then you can colour it if you want.
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
annotations: data[0].y.map((v, i) => ({
x: -0.75,
y: i,
xref: 'x',
yref: 'y',
text: "⬤",
showarrow: false,
font: {
size: 14,
color: ['red', 'blue', 'green'][i % 3]
}
}))
};
Plotly.newPlot('myDiv', data, layout);
<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>
Edit: now using changed labels:
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
data[0].y = data[0].y.map((v, i) => {
const color = ['red', 'blue', 'green'][i % 3];
return `${v} <span style="color: ${color};">⬤</span>`
})
var layout = {
xaxis: {
showline: true,
},
margin: {
l: 100,
}
};
Plotly.newPlot('myDiv', data, layout);
<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>

Pie of a Pie chart in HighCharts

I have a question regarding to Highcharts option for plotting a "pie-of-a-pie" chart. I need to show something similar to the one: https://www.amcharts.com/demos/pie-of-a-pie/?theme=material Can i do the same thing in Highcharts? If yes please do help.
If not possible in High Charts, can you please help in amcharts only?
Yes, you can achieve that result in Highcharts. You can use two pie series and update one of them in series.point.events.click funtion. For example:
series: [{
data: [{
y: 1,
details: [1, 3, 2]
}, {
y: 2,
details: [4, 31, 2]
}, {
y: 3,
details: [14, 3, 2]
}],
point: {
events: {
click: function() {
var series = this.series.chart.series;
series[1].setData(this.details.slice());
}
}
},
center: [200, 100],
size: 200
}, {
size: 100,
center: [500, 100],
data: []
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4996/
API Reference:
https://api.highcharts.com/highcharts/series.pie.size
https://api.highcharts.com/highcharts/series.pie.center
https://api.highcharts.com/highcharts/series.pie.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Series#setData

How can I add style to title of donut c3.js chart

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>

Highcharts - How to set custom colors for the series

I'm using Highcharts to render some charts for a project. My problem is that when I try to set colors array in plotOptions.column, it doesn't work. Although, it works fine for plotOptions.pie.
What I need to do is to set different color presets for different series types. So when I add series of same type, they have colors picked up from their colors array. But now, for some weird reason, the default colors are showing although I have defined my own colors array for each series type.
Here is the fiddle to better understand what I mean:
http://jsfiddle.net/c5nhd/1/
And here is the link to official documentation:
http://api.highcharts.com/highcharts#plotOptions.column.colors
DEMO of different color for different series of the column chart from our customized array of colors thus overriding the default colors of the highcharts.
code:
var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'];
$( '#container' ).highcharts({
plotOptions: {
pie: { //working here
colors: colors
}
},
colors:colors,
series: [{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}]
});
The trick is to set the series color and not global options colors or point colors.
Global options colors is an applied set for all charts on the page. It will be ok if you apply it to another chart.
Also, colorByPoint will need to be false. This is default false, so you can exclude.
Also make sure to set color and not color(s) if you wish to include a legend. The legend will not know what color to use if you set multiple colors and will just default.
$( '#container' ).highcharts({
plotOptions: {
column: {
//colorByPoint: false,
//stacking: 'percent',
},
pie: {
colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']
}
},
series: [{
type: 'column',
color: '#FF530D',
data: [25, 34, 15, 17, 19]
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}, {
type: 'column',
color: '#333333',
data: [15, 27, 10, 23, 21]
}]
});
Here is an update to your js fiddle.
http://jsfiddle.net/c5nhd/4/
This also works if you wish to stack by percent.
In fact, You should use the latest highcharts.js (Highcharts JS v6.1.4 (2018-09-25)).
I have fixed this using version 6x.

Categories