Since I could not find and answer for this question, I hope it's not a duplicate. I'm using chartist.js, and I make a simple donut, that's pretty easy and straight forward, but now I'd like to disable the labels, which works fine and add a single lable inside of the donut (Thhis is the problem). It's not needed, that the label gets greated, by the chart itself, it would be sufficient if it's just a new div or something else.
My Code so far:
<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
and
new Chartist.Pie('.ct-chart1', {
labels: [],
series: [75, 25]
}, {
donut: true,
width: '300px',
height: '200px',
donutWidth: 30,
startAngle: 0,
total: 100
});
I already tried to make the chart itself a flexbox and add the label as child and center it that way, but that did not work and I tried to surround the chart with a new div, but that let's the chart disappear.
<div>
<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
</div>
I'd use the draw event to center labels to the middle of the chart. Check this bin http://jsbin.com/hipafu/edit?html,css,js,output
Also watch out for the styles:
.ct-label {
dominant-baseline: central;
text-anchor: middle;
}
Related
Is there an easy way to create a border radius for a plot in plotly module? I have tried this with no luck...
var trace1 = {
x: time,
y: scaledData,
mode: 'lines',
type: 'scatter'
};
var layout = {
xaxis: {type: 'date'},
yaxis: {title: 'Moisture %'},
width: 320,
height: 320,
margin: {l: 50, r: 30, b: 50, t: 65, pad: 10},
paper_bgcolor: '#79ff4d',
plot_bgcolor: '#c6ffb3',
borderRadius: '15px',
title:'Past 24 Hours'
}
return (
<Plot data={[trace1]}
layout={layout}
/>
);
I also tried the css method but I think I am doing something wrong here as well. I tried creating a div of same size and position and wrapping the plot in it. Then putting a radius on the div but it is behind my plot so it does me no good. Not sure how to do the css hack but I would accept this answer as well, although more work.
It may be possible to get the element by class name if you are displaying this in an HTML page. In my case the class was main-svg. In the javascript on your page use the following:
<script>
var plotDiv = document.getElementsByClassName('main-svg') //class name of plotly main area
plotDiv[0].style.borderRadius = "15px"; //or however round you want
</script>
I just came across this question as I had the same problem. I just wrapped the plotly plot div with a div and applied a css class with border-radius and overflow: hidden as mentioned before. That worked for me.
I'm graphing some lines on a c3.js line chart, but the data label of the leftmost point is being cut off:
I've tried adding padding to the chart, but this just adds padding to the overall chart. What I need is some way to add some sort of padding to just the bar graph ticks.
Something that I've considered:
I've considered using the "transform" property:
.c3-texts .c3-text text {
transform: translate(10px, 0);
}
But moving the position of all the data labels to the right would end up causing the data labels on the right-hand side of the graph to get cut off.
Here's a simple example of labels getting cut off:
fiddle
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
],
labels: {
format: function(x){
return "Test Label"
}
}
}
});
Any help would be appreciated. Thanks!
#ksav pointed me in the right direction. I remember trying this before, but foolishly, I didn't think of putting decimal numbers. I had tried putting in the value 1, and it gave way too much padding, but doing the following worked perfectly:
axis: {
x: {
padding: {
left: 0,
right: 0,
}
}
}
I started to learn C3.js. It is pretty good to work with.
I got stuck in this part, I hope anyone can help me to go forward .
How to create circle in outer of circle in line chart using c3.js .
This is my example code
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 150, 150, 250],
['data12', 30, 200, 100, 150, 150, 250]
],
type: 'line'
},
});
It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .
How to do that?
I have tried to select all circle and apply border for that .I have tried like this
d3.selectAll('circle').each(function(){
this.style('border-radius: 20px;');
});
this is wrong way, also this is not working. How to do that ?
Is it possible in c3.js?
You can set the size of your point using chart options
...
point: {
r: 20
}
...
and you can draw a border by using CSS
#chart .c3-circle {
stroke: black;
stroke-width: 4;
}
(assuming you are drawing the chart in a container with ID chart)
Fiddle - http://jsfiddle.net/yhz8k5k9/
I'm using showArea: true but can't find the appropriate setting to make that fill all the way. Example:
I assume this is because I don't have any data points after where it ends, but I don't want the green line to extend all the way across the top. Is there another way to accomplish this?
You're using showArea:true to render the area. But as you've noted, showArea fills the area associated only with the drawn line.
What you're looking for is an additional area without a line.
In order to achieve this effect, you'll need to create two different lines: The first line will have showArea: false and extend to W3 as shown in your example. This will render the light green line as you have already.
The second line will be invisible have showLine: false and showArea: true and extend all the way across the top to W8.
In other words, you're actually looking to render two different things. One is a line, and one is a fill area.
I guess that the key solution to your problem is to use display:inline-block;
for example:
div.page {
color: white;
background: black;
margin: auto;
padding: 1em;
display:inline-block;
}
In order for the area to highlight you need to insert appropriate data. The showArea property extend as much as the data it has. Here is a proof of concept:
/* Add a basic data series with six labels and values */
var data = {
labels: [1, 2, 3, 4, 5],
series: [
[1, 5, 10, 15, 20],
[1, 20]
]
};
/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */
var options = {
showArea: true,
axisX: {
labelInterpolationFnc: function (value) {
return 'Week ' + value;
}
}
};
/* Initialize the chart with the above settings */
new Chartist.Line('.ct-chart', data, options);
.ct-chart {
width: 450px;
height: 250px;
}
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart ct-square"></div>
The two areas are highlighted within the data they represent.
Hope this helps.
I have a highchart with a legend.
I made the legend have a fixed width of 380px, and I would like to have the legend items always aligned to the right inside this legend box. They align to the left by default instead.
Those are the properties of the legend:
... legend: {
align: 'right', //this align the legend box , not the items
verticalAlign: 'top',
borderWidth: 1,
width: 380,
floating: true,
x: -35,
symbolRadius: 0,
symbolWidth: 10,
symbolHeight: 10,
enabled: true,
itemStyle: { //I even tried this but with no lick
textAlign: 'right',
}
}, ...
And this the legend box is how it looks like:
I would like those 2 items to be on the right of the box.
Here is a jsfiddle of the graph not doing what I want:
http://jsfiddle.net/MaurizioPiccini/d746v/9/
What I have tried:
1- Putting this in my CSS only changes the alignment of the text inside the item, but it does not align the items to the right of the box.
.highcharts-legend-item span {
text-align:right!important;
}
2- adding this as a property on the legend align the legend box , not the items
align: 'right',
3- adding this as a property on the legend just does not work either:
itemStyle: { //I even tried this but with no lick
textAlign: 'right',
}
In general it's not supported. However, you can try to achieve that by manually translating legend group to the right side. You will need to update that position on each chart resize, or whenever legend is redrawn.
Here is sample for it: http://jsfiddle.net/d746v/10/
this.legend.allItems[0].legendGroup.attr({ // 0 - first series, 1 - second series etc.
translateX: 320
});
So for each item you will need to calculate proper position.
You could try: text-align: right; instead of "align";
Or you could try to specify the element in CSS further like:
div .example p {
}
I hope this solves your problem. Good luck!
http://www.w3schools.com/cssref/pr_text_text-align.asp