Custom shapes for points

[dsnoeck]

It would be great to be able to define different shapes (circle, square, triangle, star, ...) for the graph points.

They are 2 main reason for that:

• Printing on a grey scale printer
• Color blind people

Some topic were create on google group without response:
https://groups.google.com/d/topic/c3js/I2UhY4U6zI0/discussion
https://groups.google.com/d/topic/c3js/gZrpl0QpKYw/discussion
https://groups.google.com/d/topic/c3js/6QRQ1VWx3vw/discussion

Legend should use the same shape as the one define for the points.

Here is how I imagine the configuration:

point: {
  shape: {
    'data1': 'circle',
    'data2': 'square',
    'data3': 'triangle'
  }
}

or, in order to define some other custom attributes:

point: {
  'data1': {
    shape: 'circle',
    color: '#ff0000',
    r: 2
  },
  'data2': {
    shape: 'square',
    color: '#0000ff',
    r: 3
  }
}

[dotch]

I would really appreciate this feature.

[luisbosch]

+1

[brandonreid]

major +1

[mlap-sbs]

+1

[prakulgupta]

+1
Did anyone found a way to achieve this ?

[prakulgupta]

I worked on implementing custom shapes for plot points. I have implemented square and rectangle shapes.
Here is my work :
https://github.com/prakulgupta/c3.js-CustomPlotPointShapes-Feature.git

Hope this may help folks who need custom shape feature 👍

[brandonreid]

Thanks @prakulgupta !
To achieve different shapes I had to run a d3 function after the chart is built that straight up changed the circles to squares.. Makes me feel gross. My plan was to just rebuild our scatter plot with straight d3. Will try that repo out!

[pimlinders]

+1 would love to see this integrated as well.

[MarcelBruse]

+1 badly needed

[holgerb]

+1 would be awesome!

[aendra-rininsland]

@prakulgupta That looks like a really good candidate for a pull request! Would you maybe consider doing so? Thanks!

[ghost]

i want a triangle shape :( , or an arrow mark. To show the point in bar chart.

[Kuzzy]

+1

[jogiaa]

+1

[sambao21]

👍

[brandonreid]

I found the solution for this. Use d3. It's way easier than you might imagine. Ex: http://bl.ocks.org/bunkat/2595950

[holgerb]

I would say that this is not really a solution.
We are using the hole bunch of functions that c3 provides. Rewrite them using the native d3 library is not very useful.

[adekbadek]

+1, it would also be great to have point types for legend

[lbonnet]

+1 !

[petersandor]

+1

[roryhardy]

👍

[bekzod]

+1

[aendra-rininsland]

Everyone who wants this feature, please either subscribe yourself or use an emoji response instead of replying +1.

Thanks.

[DestructionOfPlanetJupiter]

Something like a switch mode between these two types of displaying the graphs would be neat.

[bsell93]

Could you use something like https://github.com/d3/d3-shape#symbols to accomplish this?

[nirsalon]

For another solution with scatter chart, see here: http://stackoverflow.com/a/41848255/1178015

[felipyamorim]

+1

[chendachao]

👍

[thomashibbard]

👍

[ashleydavis]

+1

[cmh-germany]

+1

[egoens]

What's the status on this issue/request? This is really the only thing that is preventing me from using C3js and I'd love to. A11y is huge concern and the points about printing and color blindness is valid. I added a thumbs up last year but the thread has become silent in terms of a solution. Is this something that might be in current development or is this request being denied?

Thanks for all the amazing work and hope that a resolution is possible.

[ivarkallejarv]

It would also be useful if it allowed more than symbols, e.g. images or svg.
For example, highlighting certain datasets based on some attributes, would be really neat.

[locinus]

It would be even more awesome if it could allow to set a specific shape to a specific point of a dataset.
Exemple application: On a wind speed graph (date in x, speed in y), it would allow to show the direction of the wind on each value (directional arrow as a point shape).

[hsuh]

+1

[abrupt-e]

👍

[marcossilvabr]

👍

[ivarkallejarv]

Please upvote the comment that you like, instead of commenting +1 or thumbs up, it makes it easier to follow the issue by not spamming anyone's inbox and only sending messages about relevant input

[AbdurRehman91]

👍

[sommergis]

👍

[desmondiwang]

👍

[pchaganti]

👍

[opensrcken]

Can someone with deeper knowledge of the c3 codebase comment on how one could implement this change? Given such guidance, perhaps someone from the community would volunteer to take on this task.

[bsell93]

Use highcharts... Way better: https://www.highcharts.com/blog/products/highcharts/

[BrandKNY]

Any progress expected on this? This is nearly a 4 year old issue as of this writing.

[DemersM]

@BrandKNY This project is not maintened anymore. billboard.js is the new active branch, but this feature is not ready in billboard.js neither

[ppKrauss]

(this issue is old/2015! but no point style exists at https://c3js.org/reference.html )

Perhaps the first step is to include a little enhance instead a big jump to "any shape"... Suggestion: as in data.colors, definition per dataset, offer option to define circle radius as object,

 point: { 
    r: { data1: 5,   data2: 2.5 } 
}