We Keep Coding

Create chart using one of the given javascript libraries

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.

C3JS JSX syntax on render for tooltip html

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)

Changing the color of a background with highcharts.js

I’m trying to change the background colors of a highcharts scatter plot. I can easily change the color of the section with this code below. However, I need change the background to more than one color. Essentially I’m trying shade the area from 60-100 with dark gray and also color the area 100-120 with light gray and than 40-60 with light gray. This is going to be a confidence plot, so I feel as if this is a feature that should be fairly common but I cannot find a solution.
this code adds a light gray background to the plot..
plotBands: [{
from: 60,
to: 100,
color: '#d9d9d9'
}]
Fiddle: Fiddle Here...

Just pass another object to plotBands array:
Updatated fiddle: http://jsfiddle.net/osevj9m3/1/
plotBands: [{
from: 60,
to: 100,
color: '#d9d9d9'
},
{
from: 100,
to: 120,
color: '#333'
}]

Simply modify your plotBands to be
plotBands: [{
from: 60,
to: 100,
color: '#d9d9d9'
},{
from: 40,
to: 10,
color: '#d0d9d9'
}],
Thanks,
-K

How to add gradient colors above of the chart line?

Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.

The break down:
You can use gridZindex and backgroundColor/fillColor properties to
produce the desired effect. Only issue is that the grid has to be
displayed over graph. Here is the solution: DEMO
Here is the code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
more info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of main plot only)
http://api.highcharts.com/highcharts#chart.plotBackgroundColor

disable hover on special slice of pie chart

I know how to disable hover on highcharts, and I edit the answer to disable hove on special slice as this demo, but it doesn't work.
I edit series attribute as the following:
series: [{
showInLegend: false,
type: 'pie',
name: 'Pie Chart',
data: [
['Mobile', 65], // first half of pie
{
name: 'Other',
y: 35,
tooltip: { enabled: false }
} // second half of pie
]
How can I disable hover for special slices on pie charts using highcharts ?

You were pretty close with your custom tooltip property idea. I personally rather using custom names as well, therefor instead of adding a tooltip data object, i'd use a custom property named tooltipDisabled:
{name: 'Other', y: 35, tooltipDisabled:true} // second half of pie
And then, using a tooltip formatter function (a callback function called when a point is hoverd, which is totally override-able), I'd discriminate the points with this property:
tooltip: {
useHTML:true,
formatter: function(){
return this.point.tooltipDisabled ? false : this.point.name +"<br><span style='font-size:18px;vertical-align:middle'>•</span>"+this.series.name+": <b>"+this.y+"</b>";
}
returning false, as you have probably guessed, disables the tooltip.
(as you can see I also added useHTML:true, so highcharts renders the bullet next to the point name.
See fiddle: http://jsfiddle.net/e7brd9do/2/