thekeenant / fcharts

:bar_chart: Create beautiful, responsive, animated charts using a simple and intuitive API.
https://pub.dartlang.org/packages/fcharts
MIT License
326 stars 46 forks source link

Is chart can be in scaffold state?(swipable along X-axis)? #36

Open josephraj2k16 opened 4 years ago

josephraj2k16 commented 4 years ago

HI,I have imported sparkline chart in my project,and the X-axis is aligning according to the number of data available(if there are 3 data,the spacing between them is equal,but if there are more data x-axis is overlapping).So,is there possibility to make the spacing between the data in x-axis constant and make all other data to be swipable horizontally as in scaffold state??...

I'm attaching the code and image of the one i explained above..

Screenshot_1568882862

code for above pic is..

////---->below is the code for data. `const cities = [ const City("May 14", Level.Not, 4,3), const City("May 15", Level.Kinda, 4,4), const City("May 16", Level.Quite, 4,3), const City("May 17", Level.Quite, 4,2), const City("May 18", Level.Quite, 4,1), const City("May 19", Level.Quite, 4,3), const City("May 20", Level.Quite, 4,4),

//const City("Palo Alto", Level.Very, 5), ];`

///--->below is the code for graph

` final xAxis = new ChartAxis();

return new AspectRatio(
  aspectRatio: 4 / 3,
  child: new LineChart(
    chartPadding: new EdgeInsets.fromLTRB(60.0, 20.0, 40.0, 30.0),
    lines: [
      new Line<City, String, int>(
        data: cities,
        xFn: (city) => city.name,
        yFn: (city) => city.size,
        xAxis: xAxis,
        yAxis: new ChartAxis(
          span: new IntSpan(0, 6),
          tickGenerator: IntervalTickGenerator.byN(1),
          paint: const PaintOptions.stroke(color: Colors.blue),
          tickLabelerStyle: new TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
        ),
        marker: const MarkerOptions(
          paint: const PaintOptions.fill(color: Colors.blue),
          shape: MarkerShapes.square,
        ),
        stroke: const PaintOptions.stroke(color: Colors.blue),
        legend: new LegendItem(
          paint: const PaintOptions.fill(color: Colors.blue),
          text: 'Ideal',
        ),
      ),
      new Line<City, String, int>(
        data: cities,
        xFn: (city) => city.name,
        yFn: (city) => city.size1,
        xAxis: xAxis,
        yAxis: new ChartAxis(
          span: new IntSpan(0, 6),
          tickGenerator: IntervalTickGenerator.byN(1),
          paint: const PaintOptions.stroke(color: Colors.green),
          tickLabelerStyle: new TextStyle(color: Colors.green, fontWeight: FontWeight.bold),
        ),
        marker: const MarkerOptions(
          paint: const PaintOptions.fill(color: Colors.green),
          shape: MarkerShapes.square,
        ),
        stroke: const PaintOptions.stroke(color: Colors.green),
        legend: new LegendItem(
          paint: const PaintOptions.fill(color: Colors.green),
          text: 'Actual',
        ),
      ),

    ],
  ),
);`