I'm trying to create a chart that looks like this using ChartJS, D3.js, NVD3 or c3.js but I'm having trouble. Is this even possible with any of these libraries?
You can use C3.js bar charts and hide some of the x-axis but that may require extra JS to do so unless you make the x axis label ' '. If you want all the bars the same colour you'll need to use CSS (unless you declare a pattern). It will not be generated to look identical to that in C3.js without extra manipulation of the code.
You can edit data around on https://c3js.org/samples/chart_bar.html to see how your data would look if you would like to.
You can add
color: {
pattern: ['#0e9999','#06754b','#eb7a02','#9734b0']
},
To your generation of the chart with whatever pattern of colours you would like (you can have as many or as few colours as you would like. I just happened to need 4 for my code)
In your case you can do
color: {
pattern: ['#FFA500']
},
In data you can declare an 'x' to have your supplied x labels
data: {
x: 'x',
columns: [your data goes here including x labels],
type: 'bar'
}
I'm not sure about the other libraries but C3.js is essentially a wrapper for D3.js so anything that can be done in one is most likely theoretically possible in both. C3.js is just easier to understand the code for. (see: https://c3js.org/)
Update:
If this wasn't clear enough you can do:
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '1',' .','3','. ','. ','6'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
}},
color: {
pattern: ['#FFA500']
},
bar: {
space: 0.05, //sets the gap between the bars
width: {ratio:1}
},
grid: { //the lines (remove if you didn't want grid lines)
y: {
show: true
},
x: {
show: true
}
},
legend: { //hides the legends
show: false
}
});
To do something similar to what you have (you'll need to edit the data to be the exact data you want but that'll be a simple edit on your part)
If you don't want dashed grid lines add:
.c3 .c3-grid line {
stroke-dasharray: 0!important;
stroke: #808080 !important;
}
to your CSS file
I use recharts with React. I think it's the best charting library out there.
Related
Is it possible to make echarts line chart with 1 line painted in different colors? For example if value <= 0 the color is red, if > 0 the color is green?
Echarts has an option called visualMap that does exactly what you are looking for.
visualMap doc
visualMap code example (I selected the example that fits best, but there are others)
In your case you'll have something like that :
visualMap: {
show: false, // Wether to show the legend or not (default: true)
pieces: [
{
min: -9999, // Normally not needed but doesn't work without that (1)
max: 0,
color: '#F35E07' // Red
},
{
min: 0,
color: '#93CE07' // Green
},
],
outOfRange: {
color: '#F35E07'
}
},
It'll split your line in 2 pieces :
below 0 (written max: 0) : red
above 0 (written min: 0) : green
In addition, the visualMap option has more to offer : you can have more than 2 pieces (like in this example), have a smooth gradient instead of pieces (using type: 'continuous' like in this example), and many other things that are explained in its doc.
(1) Note about the bug: Normally if you don't specify min or max,
it's set to -Infinity or Infinity. But here you have to specify
min AND max in one of the two pieces (I don't know why).
If you consider plotting two charts and ignoring some of its points with '-', you can achieve the same visual result of a multicolored line chart.
Although the documentation does not provide an immediate example of how to color specific segments of a line chart, it actually instructs about how you can use empty data,
While there are empty elements, the lines chart will ignore that point without passing through it----empty elements will not be connected by the points next. In ECharts, we use '-' to represent null data, It is applicable for data in other series.
With that in mind, by overlaying two equal charts and emptying some points, you can actually construct the logic of a multicolored chart. Notice that it is better if you can do it programmatically so that you can vary the number of line segments to be colored.
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {},
yAxis: {},
series: [
{
data: [
[-20, -20],
[-10, 30],
[0, 40],
['-', '-'],
['-', '-']
],
type: 'line',
lineStyle: {
color: "red"
}
},
{
data: [
['-', '-'],
['-', '-'],
[0, 40],
[10, 100],
[20, 60]
],
type: 'line',
lineStyle: {
color: "green"
}
}
]
};
option && myChart.setOption(option);
.as-console-wrapper { max-heght: 100% !important }
<script src="https://cdn.jsdelivr.net/npm/echarts#5.3.2/dist/echarts.js"></script>
<body>
<div id="main" style="width: 225px;height:225px;"></div>
</body>
I am trying to make chart, sort of like a pie chart, but with each slice being the same size, and having a percentage of it filled.
Something like this.
My question is similar to this one: Pie chart with different fill percentage.
But it is 4 years old so I thought I would ask again.
I have tried using Canvasjs, Google charts, and highcharts but none of them support anything similar. I also want to have the slices functioning as buttons that can rotate the chart, having the selected one being positioned in the bottom.
You can achieve that result in Highcharts. Each slice should be a different series with different size. Each series should have points in the number of the series, all points should be invisible except the one - also, it is needed for disabling ignoreHiddenPoint so empty space will be drawn.
For example, you have an array of points ['20%', '30%'] - you need to map the points to series array:
[{
size: '20%',
keys: ['y', 'visible'],
data: [[1/2, true], [1/2, false]]
}, {
size: '30%',
keys: ['y', 'visible'],
data: [[1/2, false], [1/2, true]]
}]
You also might create an additional series which will be the background of the pie
const backgroundSeries = [{
size: '100%',
data: [{y: 1, color: 'rgba(0, 0, 0, 0.4)'}],
enableMouseTracking: false,
borderWidth: 0,
}];
For rotating the pie, you need to update startAngle property
chart.update({
plotOptions: {
pie: {
startAngle: startAngle
}
}
});
Live example and output
http://jsfiddle.net/1yjc4ogb/
well i have a application when this use a dynamic tooltip, this have to change the design depending of the values on the graph, but add inner html into the content of the tooltip is being very hard to refactor because i have a lot of design for the tooltip into many conditions and variables
i tried importing a component but the content function expect only a string with the html
so i wondering if is possible to add jsx syntax or add a react component to render the html of tooltip into the content of c3
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
},
axis: {
y: {
padding: {bottom: 0},
min: 0
},
x: {
padding: {left: 0},
min: 0,
show: false
}
},
tooltip: {
contents: function () {
// call a function that return a react component
}
}
You can use ReactDomServer.renderToString to render this https://www.npmjs.com/package/react-dom#react-domserver
However i am not sure if this a good solution, it was not designed for this purpose. (if you check console, you can see there still is an error).
Here is working fiddle of using React component in c3js tooltip.
http://jsfiddle.net/uqh2679x/
But still you can achieve same thing using template literal:
Working fiddle: http://jsfiddle.net/z7evqpnL/
tooltip: {
contents: (data) => `
<div class="tooltip">
<div class="title">${customText}</div>
<div>Data1: ${data[0].value}</div>
<div>Data2: ${data[1].value}</div>
</div>`
}
}
When you use `` you can put variables inside the string like above ${variable}. Also you can break this string into multiple lines so it is more readable (it will also preserve all line breaks if you i.e. log it)
I want to add a data label to specific point in the 'Area' chart. I'm using 'Highchart' for making graph. I want a data label in chart design as following image. What should I try ? I tried dataLabel defined in 'line' chart but it applies dataLabel to each point in the chart. I want it to be applied for specific point. Also, it should not show value of that point as a dataLabel but it should show series.name on that point.
For the relevant point in your data use the object notation and enabled data labels. You can use format and formatter to display the desired information.
Example of your series would be:
series: [{
name: 'My series name',
data: [5, 10, 30, 100, 200, 300, 600,
{
y: 900,
dataLabels: {
enabled: true,
format: '{series.name}'
}
},
700, 400, 100]
}]
Or see this more elaborate JSFiddle example.
This is likely fairly simple Q (learning the ropes with Dojo).
I have successfully created a bar chart in my web app.
// Create Chart
var chartDiv = dojo.create("div");
dijit.byId("someDiv").setContent(chartDiv);
var chart1 = dojox.charting.Chart2D(chartDiv);
chart1.addPlot("default", {
type: "Bars",
gap: 3
});
chart1.addAxis("x");
chart1.addAxis("y", {
vertical: true,
labels: [{
value: 1,
text: "Field1"
}, {
value: 2,
text: "Field2"
}]
});
chart1.addSeries("MyData", [var1, var2]);
chart1.render();
I see that you can create custom themes to your charts. However, I am thinking there must be a simpler way to define a colour (ideally a subtle gradient) for each of my bars. I am also restricted to using a dojo version served up by Esri, and not sure if that allows me to then create cutom themes.
There will only ever be 5 bars (2 in the above snippet).
i.e. I want to define a different color for each bar.
Can someone put me out of my misery and provide some guidance on how to achieve this?
In hindsight, bit lazy on my side. Here is what worked for me:
chart1.addSeries("Languages", [
{ y: var1, fill: "#BD48E9" },
{ y: var2, fill: "#FA4848" },
]);
You add the following code before calling render method
chart1.addSeries("MyData", [var1, var2],
{plot: "other", stroke: {color:"red"}, fill: "lightgreen"}
);
chart1.render();