Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jan 30 2019 22:34
    SteveCapetta opened #3482
  • Nov 08 2018 23:28
    leemi edited #3481
  • Nov 08 2018 23:28
    leemi opened #3481
  • Oct 27 2018 00:40
    rstarkov edited #3480
  • Oct 27 2018 00:40
    rstarkov edited #3480
  • Oct 27 2018 00:34
    rstarkov opened #3480
  • Oct 19 2018 14:59
    stephanwlee opened #3479
  • Oct 14 2018 14:15
    waltonseymour opened #3478
  • Oct 04 2018 09:20
    VasylKoretskyy closed #3477
  • Oct 04 2018 09:19
    VasylKoretskyy opened #3477
  • Oct 01 2018 00:47
    waltonseymour opened #3476
  • Sep 21 2018 20:22
    pastewka edited #3475
  • Sep 21 2018 20:21
    pastewka synchronize #3475
  • Sep 21 2018 20:11
    pastewka synchronize #3475
  • Sep 21 2018 18:38
    pastewka opened #3475
  • Sep 13 2018 11:21
    Fatou1993 opened #3474
  • Jul 20 2018 19:41
    riley-steele-parsons opened #3473
  • Jun 28 2018 15:32
    reckoner opened #3472
  • Jun 04 2018 23:01

    themadcreator on v3.8.3


  • Jun 04 2018 23:00

    themadcreator on 3.8.3


Dominic Wörner
Hi! I'm experimenting with Plottable, but I'm having issues with plotting more than one plot using Plottable.Components.Group(). Both plots end up in the DOM but only the last one is visible.
Dominic Wörner
any advice? :)
Dominic Wörner
solved it. Reason was I used a class called "content" on my site
Another quick question: I'm using a time scale. What would be the suggested way to add a button that sets the scale back to default (init), because pan zoom can mess up the chart
Romit Khanal
I want to resize a component according my given height and width instead of Plottable automatically setting them. How can I do that?
Romit Khanal
For an interpolated color legend, how do I set the height, width for the component?
Kyle Bedell
Hi, how do I render a line chart with holes in the dataset? I don't want the line to go to zero where I don't have data. I want the line to stop and start again where there is actually is data.
Also, on a separate note, I had to add his bit of CSS to prevent the chart from positioning itself along the right edge of the page.
.plottable .background-container, .plottable .content, .plottable .foreground-container { left: 0; }
Kyle Bedell
I imagine I'd have to create two datasets if I want to split the line.
Would be nice if nullin y direction handled this.
Kyle Bedell
Uh-oh, big red flag, is there no way of making a bezier curved line? The examples with the oscillating line chart is faked with tons of little straight line segments.
Kyle Bedell
Oh, phew! Had to dig through the code, but plot.curve('cardinal') fixes that.
Tsion Behailu
Hey all! I'm new to plottable and looking for some advice on changing the styles of the StackedBar plot. Is it possible to change the shape of the bars to a different shape? I'm interested in creating bars with rounded tops (image attached
Screen Shot 2018-12-04 at 11.49.52 AM.png
Jānis Elmeris
Hello! I would like to know, if it's possible to draw a line graph with more than one (multiple) Y-axis ()? (I would need three.)
Ian Smith

Hi. First of all I want to say thank you for creating such a useful module.

I have a question about the selection colour for the XDragBoxLayer. It appears as a washed out grey colour and I need it to be a bit more obvious, however the XDragBoxLayer doesn't seem to support attr or have an obvious way of changing the background colour.

I'm obviously missing something here but I just can't seem to spot it. So when I drag an area, how do I specify the colour that the area is drawn in?

Ian Smith

@ismith78 Found the issue - the colour is controlled by css and there was a definition that was pulled in elsewhere in the code that set the opacity to 0.03. After changing that the box is more visible.

If anyone else gets stuck, the css that I ended up using was

.plottable .selection-box-layer .selection-area {
fill: black;
fill-opacity: 0.3;
stroke: #CCC;

Nahuel Rosso

Hello guys!, i'm trying to replace my old d3 implementation using this library and it looks really straight forward but i having an issue, the API Documentation says that exists an DoubleClick interaction but webpack is saying :

Interactions.DoubleClick is not a constructor

Ian Smith

What is the best way of disposing of a graph when leaving a page? I have registered a ngOnDestroy which I use to make a call to the plottable destroy method. However there appears to be something trying to make a call inside plottable on mouse movement as I see the following crash

core.js:15714 ERROR TypeError: Cannot read property 'node' of undefined
at Function.../../node_modules/plottable/build/src/utils/transformAwareTranslator.js.Translator.isEventInside (transformAwareTranslator.js:56)
at Mouse.../../node_modules/plottable/build/src/dispatchers/mouseDispatcher.js.Mouse.eventInside (mouseDispatcher.js:167)
at Pointer.../../node_modules/plottable/build/src/interactions/pointerInteraction.js.Pointer._handleMouseEvent (pointerInteraction.js:38)
at CallbackSet.Pointer._this._mouseMoveCallback (pointerInteraction.js:19)
at callbackSet.js:26
at callbackWrapper (set.js:56)
at Set.forEach (<anonymous>)
at CallbackSet.../../node_modules/plottable/build/src/utils/set.js.Set.forEach (set.js:57)
at CallbackSet.../../node_modules/plottable/build/src/utils/callbackSet.js.CallbackSet.callCallbacks (callbackSet.js:25)
at Mouse.../../node_modules/plottable/build/src/dispatchers/dispatcher.js.Dispatcher._callCallbacksForEvent (dispatcher.js:80)
at Mouse.../../node_modules/plottable/build/src/dispatchers/mouseDispatcher.js.Mouse._measureAndDispatch (mouseDispatcher.js:163)
at HTMLDocument.processMoveCallback (mouseDispatcher.js:21)

I had been trapping on Interact onPointerMove and onPointerExit, but made sure that these events were cleared before the call to destroy method and that makes no difference

Ian Smith

Is there any way to dynamically define if a GuideLineLayer text is aligned to the left or right of the guideline? I'm seeing the same issue as can be seen with the example at http://plottablejs.org/examples/spacerace/.
If I hover the mouse on the far right data point (First Man on Moon 1969) then the text at the bottom is lost as the text cannot fit from the left of the gridline. It should be displayed to the right of the gridline (i.e. if the gridline is more to the right the label should switch).

However I have not been able to find anything in the API that controls this behaviour - is this something controlled in the CSS somewhere?

Ian Smith
My expectation was that this was controlled by xAlignment and that if I called xAlignment("right") that would flip the alignment of the text. However it seems that although I can check that the value has been set, changing the value from "left" to "right" has no effect.

Is it possible to create multi level charts.
For example Continent wise, Country wise, State wise sales.

Hence on the X axis there is a grouping happening at continent wise, then within that countrywise and then within that we should see state wise actual bars with values??

Something like below

A sample code will be very very helpful
Thanks a lot
Samuel Mburu
Hi there, it's been a while since I've been back, but I have a question regarding the clusteredBar plot -- is there any way to find out the gap size between the bars in a cluster?
the api docs aren't very clear as to how to find that out
Samuel Mburu
i was thinking that i could use the attribute projector to get the barWidth multiplied by the scale.innerPadding, but that did not work

well i took the longer route and used the attribute projector for barWidth, and then x1 position of my first datapoint from the first dataset, then the x position of the first datapoint from my second dataset of then the math is like this

bar2Xpos - (bar1Xpos + barWidth). <- that gives the spacing between bars -- hope that helps someone else

Samuel Mburu
i wish there was a function that returned that, but oh well
anyone had success getting plottable to draw a chat inside a render() after componentDidMount()

I have something like:

<div className="chartItem" width="150" height="100">Chart Test</div>

then inside componentDidMount in react I do the normal plottable stuff then

but it does not draw properly

Plottable is built on top of D3 React. Does doing something in D3 directly, without Plottable work as expected?
this is what I've been using. I'm not a pro in this field, but it's been working fine thus far.
<div class="panel">
     <div id="content" style="width: 1400px; height: 3800px;"></div> 
var table = new Plottable.Components.Table(tableArray)

$('#content').ready(function() {

    ccc1 = document.getElementsByClassName(xtimeclass);
    ccc2 = document.getElementsByClassName(compgroup);
    (function() {

            url: "/",
            type: "POST",
            contentType: "application/json",
            processData: false,
            data: JSON.stringify(
                    chartQuery: myQuery,
    }, 4500);

and the table array is defined as follows (it's actually a whole list of charts)
var tableArray = [];
for (let i = 0, len = plotGroups.length; i < len; i++){
    var xAxis = new Plottable.Axes.Time(xScale, "bottom");
    var yAxis = new Plottable.Axes.Numeric(yScales[i], "left")

    var ar = [];
    ar.push(new Plottable.Components.Table([
    [yAxis, plotGroups[i]],
    [null,        xAxis]])

@samuelmburu You can modify the stylesheet atributes or whatever directly. Probably not the proper way but... (you can find the elements using your browser's web developer inspector) For example:
var xtimeclass = "component axis x-axis time-axis";
var compgroup = "component component-group";
var tickcontainer = "content component-overflow-visible";
var ccc1 = null;
var ccc2 = null;
$('#content').ready(function() {

    ccc1 = document.getElementsByClassName(xtimeclass);
    ccc2 = document.getElementsByClassName(compgroup);
                        for (let c = 0; c < ccc1.length; c++) {
                            ccc1[c].style["left"] = "80px";
                        for (let c = 0; c < ccc2.length; c++) {
                            ccc2[c].style["left"] = "80px";
@ghost~5b46fd5bd73408ce4fa08cae what do you mean by localizing? Converting to your timezone? My guess is this is beyond the chart and you have to write that yourself. If you're talking about the formats, d3 has a bunch of parsers, e.g.
var strictIsoParse = d3.utcParse("%Y-%m-%dT%H:%M:%S.%LZ");
var myParse = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ");
var myFormat = d3.timeFormat("%Y-%m-%d %H:%M:%S.%L");
is there some examples of using plottable with react?
I am looking to see if it can render with jsx
Is plottabe working with D3 v5.14.2?
Adrien Renaud
Dear Plottable community,
I'm experimenting with Plottable in React and I'm looking for help on adding a tooltip on my charts.
I made a sample project with create-react-app: https://github.com/adrienrenaud/react-plottable.
So far, I'm able to render plots with data update and interactions but I'm struggling to get a tooltip working. Any help would be most welcomed!
Thanks a lot
@marklester you could have a look at my React example if you like: https://github.com/adrienrenaud/react-plottable
I like it
Hi, I'm trying to follow the documentation on to contribute to the repo for unit tests. I keep getting errors after building and starting using yarn. Does anyone have any tips?
The error is this: Error: Cannot find module 'webpack-cli/bin/config-yargs'
Can anyone comment on whether or not Plottable is still compatible with D3 v6? I'm getting isues with D3's 'map' function when using Plottable 3.9
William Pearson
Is anyone familiar with how to add a button for resetting zoom and pan
Hi, I'm trying to create a graph with multiple lines and yAxis for each line, so when you hover over one of the lines it shows the relevant yAxis. I'd like to set the xAxis range wider, so that the lines won't be too bunched up. Does anyone have an example?

Can anyone comment on whether or not Plottable is still compatible with D3 v6? I'm getting isues with D3's 'map' function when using Plottable 3.9

Does anyone maintaining Plottable still read this Gitter? I'd like to find out if Plottable is still compatible with D3.

Laurent Faucheux
@Rockburner No news since then ?